transfrom用法

用途：实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

1、rotate（旋转）

transform:rotate(10deg):旋转10度。“deg”表示度，正数为顺时针旋转，负数为逆时针旋转

2、scale（缩放）

transform:scale(0.4):水平和垂直方向同时缩放0.4倍

transform:scale(0.4,0.5):水平方向缩放0.4倍，垂直方向缩放0.5倍

transform:scaleX(0.4):水平方向缩放0.4倍

transform:scaleY(0.4):垂直方向缩放0.4倍

3、skew（倾斜）

transform: skew(30deg, 45deg)​​​​：水平方向以skew的默认原点transform-origin为中心点倾斜30度，垂直方向以skew的默认原点transform-origin为中心点倾斜45度

transform: skewX(30deg)  ：水平方向以skew的默认原点transform-origin​​​​​​​为中心点倾斜30度

 transform: skewY(30deg)  ： ：垂直方向以skew的默认原点transform-origin​​​​​​​为中心点倾斜30度

4、translate（移动）左负右正

transform: translate(45px, 150px)：水平移动45像素，垂直移动150像素

transform: translateX(45px)  ： 水平移动45像素

transform: translateY(45px)  ： 垂直移动45像素

transform-origin​​​​​​​（中心点）

默认的transform-origin是元素自己中心位置进行变化

更改中心点：transform-origin（X,Y）

X水平方向取值:px、em、left、center 、right.left、center 、right对应的百分值为left=0%;center=50%;right=100%

Y垂直方向的取值:px、em、top 、center、 bottom.top 、center、 bottom对应的百分值为top=0%;center=50%;bottom=100%;