旋转立方体

1. 为body设置perspective : n px ;
   n为距离观察者平面的距离
2. 为3D效果的父元素设置transform-style: preserve-3d 使其具有3D效果;
3. 根据各平面位置设置transform: rotateX/Y/Z( n deg) translateX/Y/Z( n px);
   rotate 为绕X/Y/Z轴旋转，n 为旋转度数
   translate为顺X/Y/Z轴平移，n为平移距离
4. 旋转时，坐标轴同样旋转
5. 为父元素设置animation: move 3s linear infinite;动画旋转效果
   move为动画名字（自己命名）
   3s为动画实现时间
   linear为动画执行方式（线性） infinite为动画执行次数（无限）
6. 旋转动画的细节（从... 到...）
   名字应与animation中设置的命名相同

@keyframes move{
            form{
                transform: rotateY(0deg);
            }
            to{
                transform: rotateY(360deg);
            }
        }

旋转

1. transform: scale(0.5);
   缩放（0.5倍）
2. transform-origin : ;
   设置或检索对象以某个原点进行转换
   默认中点 相当于

transform-origin : 50% 50% ;  

3. transform-style：preserve-3d ;
   指定子元素定位在三维空间内
4. transform: rotateX/Y/Z( n deg);
   绕X/Y/Z轴旋转
5. transform: translateX/Y/Z( n px);
   绕X/Y/Z轴平移
6. 当元素中有多条transform语句需要执行时，要将他们写在一条transform语句中，如：

transform: rotateX/Y/Z( n deg) translateX/Y/Z( n px);