如何在CSS中使用过渡制作卡片翻转效果_transform rotateY结合transition应用-css教程-PHP中文网

如何在CSS中使用过渡制作卡片翻转效果_transform rotateY结合transition应用

P粉602998670

发布： 2025-11-28 18:03:35

原创

742人浏览过

使用CSS transform和transition可实现网页卡片翻转效果。1. HTML结构由外层容器与前后两面div构成；2. CSS设置perspective创造3D透视，transform-style: preserve-3d保持3D空间；3. 正面初始不旋转，背面用rotateY(180deg)隐藏；4. 通过:hover触发父容器或子元素rotateY(180deg)翻转；5. backface-visibility: hidden防止背面透出，transition确保动画流畅。整个过程无需JavaScript，仅靠CSS即可完成平滑翻牌效果。

如何在css中使用过渡制作卡片翻转效果_transform rotatey结合transition应用

想让网页中的卡片产生翻转效果，比如像翻牌一样展示背面内容，可以使用CSS的transform配合rotateY和transition来实现。整个过程不需要JavaScript，仅靠CSS就能完成平滑动画。

基本结构：HTML布局

卡片翻转需要一个外层容器包裹前后两个面，通常使用两个<div>分别代表正面和背面，并放在一个父元素中。

<div class="card">
  <div class="card-face front">正面内容</div>
  <div class="card-face back">背面内容</div>
</div>

登录后复制

CSS核心：设置3D变换与过渡

关键在于使用transform-style: preserve-3d保持3D空间，再通过rotateY控制旋转角度，结合transition让变化平滑。

以下是主要样式：

立即学习“前端免费学习笔记（深入）”；

Noiz Agent

AI声音创作Agent平台

323

查看详情

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 隐藏背面不可见时的元素 </em>/
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.6s ease;
}</p><p>.front {
background: #fff;
}</p><p>.back {
background: #007bff;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

登录后复制

触发翻转：悬停或点击状态

通过:hover伪类触发翻转，鼠标移上时让整个卡片旋转180度，此时背面会转到前面。

.card:hover .front {
  transform: rotateY(-180deg);
}
<p>.card:hover .back {
transform: rotateY(0deg);
}</p>

登录后复制

注意：我们是对两个面分别控制旋转，确保翻转过程中视觉连贯。也可以将transform直接应用在父容器上简化逻辑：

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
<p>.card:hover .card-inner {
transform: rotateY(180deg);
}</p><p>.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}</p><p>.back {
transform: rotateY(180deg);
}</p>

登录后复制

要点总结：