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

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

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

2D 转换之移动 translate

transform: translate(x,y);

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

2D 转换之旋转 rotate

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

transform:rotate(angle)

角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

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

2D 转换之缩放scale

transform:scale(x,y);

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() ...等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）

标签：scale,转换,transform,旋转,2D,translate,CSS,三剑客
来源： https://www.cnblogs.com/qingheshiguang/p/16327854.html