transform介绍

1、transform基本方法

1.rotate 旋转 deg
rotateX/rotateY/rotateZ
2.translate 平移 px 正值向前移动，负值向后移动
translateX/translateY/translateZ
3.skew 斜切 deg
skewX/skew 正值是拉左上角和右下角，负值拉右上角和左下角
4.scale 缩放（原始大小的多少倍）
scaleX/scaleY
5.perspective 景深
perspective 属性定义 3D 元素距视图的距离，以像素计。

rotate,skew,scale都是围绕着元素的中心点进行变化

2、transform的执行顺序

transform的执行顺序，后写的动画先执行

3、变化原点

transform-origin 变化原点center center。关键字：bottom、top、center、left，right，长度单位（px、em、rem），会受到影响的属性有rotate、skew、scale

4、3D盒子

制作3D盒子代码：

  

    前
    右
    后
    左
    上
    下