transform3D旋转

3D旋转在2D旋转的基础上增加了第三条坐标轴-Z轴，Z轴位置与视线方向相同，在2D空间内看不到Z轴的变化，可以添加透视属性perspective实现透视效果，透视属性需要给父级元素添加，取值为像素单位，建议的单位区间为800px-1200px。

透视的距离为视距，就是人眼到屏幕的距离，有近大远小，近实远虚的效果。

添加了透视属性就可以看到Z轴的变化，Z轴的取值为正值表示离人眼的距离近，负值相反。

3D旋转语法：

1、综合写法：

transform：rotate3d（x，y，z，角度度数）

                                                          x、y、z的取值为0-1之间，角度单位为deg

.box {
            width: 400px;
            height: 400px;
            margin: 100px auto;
            perspective: 600px;
        }
        .box img {
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        .box:hover img {
            /* 3d旋转综合写法*/
            /* x,y,z轴取值为0-1,角度度数,0-1角度度数范围 */
            transform: rotate3d(0.5,0.5,0.5,90deg);
        }

2、单独写法：transform：rotateZ（ 值 ）；   

                                        取值为正数为顺时针旋转，负数逆时针，单位使用角度单位