transform

2D

位移（和子绝父相中的top，left类似，百分比的话，最大位移距离等于它本身）

• transform：translate（x,y）
• transform：translateX（x）
• transform：translateY（y）
• 例如：100px*100px的方块最大位移距离(百分比时)
  transform：translateX（200%）transform：translateY（200%）
  相当于top：100px，left：100px

缩放（以这个模块的中心进行缩放）

• transform：scale（2，1）
• transform：scale（1，1）是正常大小
• 如果想要更小的字体也可以通过缩放

font-size:10px;
-webkit-transform：scale（.3）
意思是，字体大小为3px，0.3*10 即可

旋转

• rotate（x deg）
  以中心开始旋转

倾斜

• skew（x,y）单位deg
• skewX（x）
• skewY（y）
  也是以中心作为倾斜点

3D

要有3D的效果，需要给父节点添加 perspective 属性

• perspective：400px
  值越大离得越远越小，值越小离得越近越大
• 父元素和子元素的宽高都要加上，3D效果是以父元素的中心来进行操作的

旋转

• rotateX（x deg）
  以中间的横为轴进行前后的旋转
• rotateY（y deg）
  以中间的纵轴进行左右的翻转
• rotateZ（z deg）
  从中间进行旋转