CSS3：3D旋转rotate3d及3D呈现transform-style

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或自定义轴进行旋转。
语法格式：
transform:rotateX(45deg);沿着x轴正方向旋转45度；
transform:rotateY(45deg);沿着y轴正方向旋转45度；
transform:rotateZ(45deg);沿着z轴正方向旋转45度；

body {
/*想看到3D透视效果需要给被观察元素的父元素添加透视*/
     perspective: 300px;
 }
.box{
    width: 150px;
    height: 150px;
    margin: 50px auto;
    background-color: skyblue;
    transition: all .3s;
}
.box:hover {
/*沿着x轴正方向旋转90deg*/
    transform: rotateX(90deg);
}

3D呈现transform-style

• 控制子元素是否开启三维立体环境；
• transform-style:flat，表示子元素不开启3d立体空间，默认就是flat；
• transform-style:preserve-3d，表示子元素开启3d立体空间
• 该代码还是写给父级，影响的是子盒子

body {
     perspective: 300px;
     transform-style: preserve-3d;
}
.box,
.box2 {
      position: absolute;
      width: 150px;
      height: 150px;
      top: 50px;
      left: 50%;
      margin-left: -75px;
      background-color:pink;
      transition: all .3s;
      transform: rotateY(-70deg);
}
.box2 {
      background-color: skyblue;
}
.box2:hover {
     transform: rotateX(90deg);
}

呈现出来的是这样一个3D效果：

如果不给父盒子添加transform-style: preserve-3d;就会呈现出2D效果，如下：