首页

Appearance

卡片翻转效果 ​

试一试 ​

试一试

正面
背面

实现原理 ​

  1. 定义一个容器，里面放两个盒子。
html
<div class="flipbox">
  <div class="card front">
    <h2>正面</h2>
  </div>
  <div class="card back">
    <h2>背面</h2>
  </div>
</div>
  1. 定义容器样式，定义盒子基础样式。
css
.flipbox {
  position: relative;
  width: 210px;
  height: 280px;
  cursor: pointer;
}
.card {
  width: 100%;
  height: 100%;
  background: #10b981;
}
  1. 定义正面和背面盒子的初始状态。
css
.front {
  transform: rotateY(0deg); // 绕y轴0度
}
.back {
  transform: rotateY(180deg); // 绕y轴180度
}
  1. 鼠标悬浮，旋转前后盒子。
css
.flipbox:hover .front {
  transform: rotateY(-180deg); // 绕y轴-180度
}
.flipbox:hover .back {
  transform: rotateY(0deg); // 绕y轴0度
}
  1. 开启 3d 空间属性，div 会有正面背面之分。
css
.card {
  width: 100%;
  height: 100%;
  background: #10b981;
  transform-style: preserve-3d; 
  backface-visibility: hidden; //  隐藏div背面  
}
  1. 设置前后两个盒子位置重叠，并设置过渡动画
css
.card {
  width: 100%;
  height: 100%;
  background: #10b981;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  position: absolute; 
  top: 0; 
  left: 0; 
  transition: transform 0.5s ease-in-out; 
}

实用案例 ​

翻牌抽奖：点击某一张卡牌，看看自己是否中奖。

再玩一次