CSS动画特效三剑客之 transform(转换/变形)

transform可以实现元素的位移、旋转、变形、缩放。

缩放：scale
移动：translate
旋转：rotate
倾斜：skew

2D 转换之移动 translate

transform: translate(x,y);
transform: translateX(2em);
transform: translateY(3in);

定义 2D 转换，沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(angle)

角度为正时，顺时针，负时，为逆时针

transform:rotate(45deg)
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

默认旋转的中心点是元素的中心点

/* 设置旋转中心点*/
transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开
x y 默认 转换的中心点是元素的中心点 （50% 50%）
还可以给x y 设置像素或者方位名称（top bottom left right center）

2D 转换之缩放scale

transform: scale(x,y);
transform: scaleX(2);
transform: scaleY(0.5);

transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小

注意：

只能转换由盒模型定位的元素。
同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）