css之transform

transform-style:
定义了该元素的子元素是位于三维空间内还是自身的二维空间；
flat | preserve-3d
(这里如果对父元素进行了翻转操作，如果transform-style 为preserve-3d，那么子元素也会跟着翻转； 否则不会影响到子元素)

backface-visibility:
visible | hidden
定义元素的背面是否可见（对应于3d变换）
perspective:
none |
指定观察者距离z=0平面的距离，为元素及其内容应用透视变换(把屏幕想象成z=0平面，即观察者距离屏幕的距离)

下面是一段卡片翻转效果的代码；

     

      

        hello, this is front
      
      

        this is the back
      
    
 

.container {
  perspective: 1000;
}

.container, .front, .back {
  width: 200px;
  height: 160px;
} 

.flipper {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;     /*important*/
}
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  background-color: green;
  backface-visibility: hidden;  /*important*/
}

.front {
  z-index: 9
}

.back {
  transform: rotateY(180deg)
}

.container:hover .flipper {
  transform: rotateY(180deg)
}