动画-变形2D

z轴Y轴平移

变形是通过css来改变元素的形状或位置
  -变形不会影响到页面的布局(只折腾自己)
  -transform: ;用来设置元素的变形效果 ,
      尽量变形写在一个transform里，不然下面再写一个，就会覆盖上面           
    可选值：
      -平移：translateX()沿着x轴方向平移
            translateY()沿着y轴方向平移
            translateZ()沿着z轴方向平移
              -平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的
水平垂直居中

z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离
    距离越大，元素离人越近 
  z轴平移属于立体效果（近大远小），默认情况下网页不支持透视
    如果需要看到效果，必须要设置网页的视距
/* perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px */
/* perspective(800px)  设置在transform里面或者父元素里，都可以 */
body:hover .box1 {
  transform: perspective(800px) translateZ(100px);

旋转

默认情况下是绕着中心点进行转动的；
参数就一个，单位deg
如果这个值为正值，则是元素对原点中心顺时针旋转；
反之如果这个值为负值，元素对原点中心进行逆时针旋转。
可以单独对x轴y轴z轴进行设置：这里的X/Y/Z也是是需要大写的。
rotateX() ，元素围绕其 X 轴以设定的度数进行旋转
rotateY() ，元素围绕其 Y 轴以设定的度数进行旋转
rotateZ() , 元素围绕其 Y 轴以设定的度数进行旋转
设置是否显示元素的背面 
    backface-visibility: ;
     可选值：
        visible 默认值，显示
        hidden  不显示