1. 原理

1.1 关键属性介绍

• perspective： 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定；
• transform-style：设置元素的子元素是位于 3D 空间中还是平面中；
• backface-visibility：指定当元素背面朝向观察者时是否可见；

1.2 实现方案

1. 准备一个父元素div,设置 css 属性perspective: 1000px; position: relative; transform-style: preserve-3d;
2. 准备两个div,一个是正面、一个是背面，使用绝对定位让他俩重合。设置属性backface-visibility: hidden; transition: transform .25s ease-in-out;
3. 将正面的div设置css的一个属性，transform: rotateY(0deg);将背面的div设置css的一个属性，transform: rotateY(-180deg);
4. 在鼠标滑过去时，设置hover效果。正面 transform: rotateY(180deg); 背面 transform: rotateY(0deg)

2. 效果预览

翻牌效果

HTML

<div class="container">
  <div class="item font">这是正面</div>
  <div class="item back">这是背面</div>
</div>

CSS

.container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;

  .item {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 200px;
    font-size: 20px;
    color: white;
    text-align: center;
    border-radius: 10px;
    backface-visibility: hidden;
    transition: transform 0.6s;
  }

  .font {
    background-color: #2980b9;
    transform: rotateY(0deg);
  }

  &:hover .font {
    transform: rotateY(-180deg);
  }

  .back {
    background-color: #e74c3c;
    transform: rotateY(-180deg);
  }

  &:hover .back {
    transform: rotateY(0deg);
  }
}

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)