CSS立体实现

做项目时需要做一个能够翻转盒子，实质上是由立方体压缩而来，大致效果如图

重要属性

1. perspective：设置元素被查看位置视图
2. transform-style：设置元素所处的是3D空间还是平面
3. transform：实现文字或图像的变形处理：缩放（scale）、倾斜（skew）、移动（translate）、旋转（rotate）
4. transform-origin：调整坐标原点

代码

.vue

<flip-box front="简单" back="哈"></flip-box>

components: {
    'flip-box': {
      props: ['front', 'back'],
      template: '<div class="flipBox"><div class="flip"><div class="front">{{ front }}</div><div class="back">{{ back }}</div></div></div>'
    }
  }

为方便查看，我把HTML抽取出来

<div class="flipBox">
    <div class="flip">
        <div class="front">{{ front }}</div>
        <div class="back">{{ back }}</div>
    </div>
</div>

css

.flipBox {
  perspective: 1000;    //其实我没有理解到他的作用，望大神回答
}
.flip {
  position: relative;
  transform-style: preserve-3d;
  transition: 0.6s;
  margin: 1px;
}
.front,
.back {
  position: absolute;   //让front和back重叠
  width: 100%;
  backface-visibility: hidden; /* 避免在实现动画效果时露出背面 */
}

.flipBox:nth-child(odd) .flip .back {
  z-index: 1;
  transform: rotateY(-180deg); /* 最开始就翻转180度，以背面示人 */
}
.flipBox:nth-child(odd) .flip .front{
  color: black;
  background-color:pink;
}
.flipBox:nth-child(odd) .flip .back{
  color: black;
  background-color:white;
}
.flipBox:hover .flip {
  transform: rotateY(180deg);
}

The end