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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-28

浏览次数：次

返回列表

使用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确保动画流畅。整个过程无需J*aScript，仅靠CSS即可完成平滑翻牌效果。

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

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

基本结构：HTML布局

卡片翻转需要一个外层容器包裹前后两个面，通常使用两个<div>分别代表正面和背面，并放在一个父元素中。<font face="Courier New"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"> <div class="card"> <div class="card-face front">正面内容</div> <div class="card-face back">背面内容</div> </div> </pre></div></font><h3>CSS核心：设置3D变换与过渡</h3> <p>关键在于使用<code>transform-style: preserve-3d保持3D空间，再通过rotateY控制旋转角度，结合transition让变化平滑。

以下是主要样式：

.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度，此时背面会转到前面。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

.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>

要点总结：