transform只适用于块级元素

transform:  
            rotate(45deg) 旋转
            rotateX() 
            rotateY() 
            rotateZ() 
            rotate3d(1,0,1,45deg)  前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略

            scale(.5,[1]) X轴缩放50%
            scaleX()
            scaleY()

            skew(45deg,[0]) 斜切
            skewX()
            skewY()

            translate(100px,[0]) 平移 百分比参照自身大小
            translateX
            translateY
            translateZ
            translate3d()

div {
      -webkit-transform: rotate(-60deg);
         -moz-transform: rotate(-60deg);
          -ms-transform: rotate(-60deg);
           -o-transform: rotate(-60deg);
              transform: rotate(-60deg);
}

transform-origin改变基点 默认为元素中心点

:left  top | right bottom |10px 10px |10% 10%百分比参照自身元素的大小 ,  赋值时以左上角为基础进行偏移

3D变换

灭点: 图形各条边延伸的线最终相交的点称为灭点, 景深越大(小), 灭点越远(近) 元素变形越小(大)

transform-style:作用于子元素

transform-style:
                flat        默认值 在2D平面运动
                preserve-3d 使子元素具有3D层次感  
默认元素会相互遮挡 最上面的元素的面积会遮挡其他元素,设置了 3D层次后,可以产生交错效果

perspective 景深 控制Z轴肉眼位置= 肉眼与屏幕的距离 景深越大效果越不好

perspective :none 默认值| 100px 设置后可以使后代元素更具有3D效果,  此属性用时写在祖先元素上  ,等于是把眼睛放到里面去看的效果

perspective-origin: 控制X Y轴的 肉眼位置 , 等于 俯视视角 / 仰视视角

left top 控制X Y轴的 肉眼位置 默认值为自身盒模型的50%, 

backface-visibility 指定元素背面 面向用户时是否显示

backface-visibility:  visible默认 可见 | hidden 隐藏元素背面