3D海报卡片效果实现——让你的海报呼之欲出

原创已于 2025-10-04 21:32:26 修改 · 635 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#3d #css3 #新人首发 #html5 #css

于 2025-09-29 22:11:55 首次发布

效果展示

本文摘要

本文介绍了如何实现电影海报的三层叠加动画效果。首先需要准备背景、人物和标题三张图片，通过DOM结构的container和card容器实现布局。核心CSS技术包括：使用相对/绝对定位实现图片叠加，通过transition实现0.5秒平滑过渡，利用transform的perspective、translate3d和rotateX属性创建3D透视效果。当鼠标悬停在card上时，人物层会上移并放大，标题层会有更强的3D效果，背景层会旋转45度，形成生动的视觉层次变化。代码结构清晰，包含完整的HTML和CSS实现。

1.准备

需要准备三张图片，背景，人物，标题。可以去豆瓣上找电影海报然后用AI(比如豆包)需要的扣除，不需要的擦除。会ps技术的可以微调一下。

2.实现

通过对三张图片的hover伪类使用transfrom进行变换实现3D效果。

2.1DOM结构

container控制布局,card作为img的容器。

<body>
    <div class="container">
        <div class="card">
            <img class="background" src="/background.png">
            <img class="character layer" src="/character.png">
            <img class="title layer" src="/title.png">
        </div>
        
    </div>
</body>

2.2CSS

为图片设置合适比例的card和img宽高。将card设为相对定位，img设为绝对定位，实现三张图片叠加效果。通过transition: 0.5s属性实现CSS状态间的平滑过渡动画。

.card{
    height: 400px;
    width: 270px;
    position: relative;
}
img{
    height: 400px;
    width: 270px;
    position: absolute;
    transition: 0.5s;
}

通过transform属性实现变换效果。其中：

perspective控制透视强度，数值越小透视效果越明显
translate3d的三个参数分别对应X/Y/Z轴位移：
- Y轴设为-50px使元素向上移动
- Z轴设为100px产生向外的放大效果
rotateX使元素沿X轴以中心点为基准进行旋转

.card:hover .character{
    transform: perspective(600px) translate3d(0, -50px, 100px);
}
.card:hover .title{
    transform: perspective(600px) translate3d(0, -50px, 150px);
}
.card:hover .background{
    transform: perspective(600px) rotateX(45deg);
}

3.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Ewareness">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        .container{
            height: 100vh;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.397);

        }

        .card{
            height: 400px;
            width: 270px;
            position: relative;
        }
        .card:hover .character{
            opacity: 1;
            transform: perspective(600px) translate3d(0, -50px, 100px);
        }
        .card:hover .title{
            transform: perspective(600px) translate3d(0, -50px, 150px);
        }
        .card:hover .background{
            transform: perspective(600px) rotateX(45deg);
        }
        img{
            height: 400px;
            width: 270px;
            position: absolute;
            transition: 0.5s;
        }


    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <img class="background" src="/background.png">
            <img class="character layer" src="/character.png">
            <img class="title layer" src="/title.png">
        </div>
        
    </div>
    <address>
        <strong>Ewareness</strong><br>
        个人主页：<a href="https://blog.youkuaiyun.com/Ewareness?spm=1011.2266.3001.5343">https://blog.youkuaiyun.com/Ewareness?spm=1011.2266.3001.5343</a>
    </address>
</body>
</html>