持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
CSS属性- transform
CSS transform属性允许对某一个元素进行某些形变,包括旋转，缩放，倾斜或平移等。
transform是形变的意思,transformer就是变形金刚;
注意事项，并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变)
所以,transform对于行内级非替换元素是无效的;比如对span、a元素等;
1.transform的用法：
常见的函数transform function有:
平移: translate(x, y)
缩放: scale(x, y)
旋转: rotate(deg)
倾斜: skew(deg, deg)
2.位移-translate
平移: translate(x, y)
这个CSS函数用于移动元素在平面上的位置。
translate本身可以表示翻译的意思，在物理上也可以表示平移;
值个数
一个值时，设置x轴上的位移
二个值时，设置x轴和y轴上的位移
值类型:
数字:100px
百分比:参照元素本身（ refer to the size of bounding box )
translate的百分比是相对于自身的。
如果设置的x位移:那么参考的是自身的宽度；如果设置的y位移:那么参考的是自身的高度 transform:translate(100%, 100%);
translate的补充
补充一: translate是translateX和translateY函数的简写。
补充二: translate的百分比可以完成一个元素的水平和垂直居中:
3.缩放– scale
缩放: scale(x, y)
scale() CSS函数可改变元素的大小。
值个数
一个值时，设置x轴上的缩放
二个值时，设置x轴和y轴上的缩放
值类型:
数字:
√1:保持不变
√ 2:放大一倍
√ 0.5:缩小一半
百分比:百分比不常用
scale函数是scaleX和scaleY的缩写
4.旋转– rotate
旋转: rotate()
值个数
一个值时，表示旋转的角度
值类型:
常用单位deg:旋转的角度（ degrees )
正数为顺时针
负数为逆时针
rotate补充
补充一: rotate函数是rotateZ函数的简写写法。
补充二: rotate的其他单位
事实上rotate支持的单位是很多的;
度(degrees)、百分度(gradians)、弧度(radians)或圈数(turns) ;
5.倾斜– skew
倾斜: skew(x, y)
函数定义了一个元素在二维平面上的倾斜转换。
值个数
一个值时，表示x轴上的倾斜
二个值时，表示x轴和y轴上的倾斜
值类型:
deg:倾斜的角度
正数为顺时针
负数为逆时针
