1.旋转 rotate()
参数值为角度,正值顺时针旋转,负值逆时针旋转
div {
transform:rotate(20deg); /*顺时针旋转20°*/
}
2.扭曲 skew()
使元素在x轴和y轴方向按照一定的角度倾斜
有三种使用方式
div {
tranform:skew(10deg,10deg); /*x轴和y轴均倾斜10°*/
}
div {
tranform:skew(10deg); /*x轴倾斜10°,y轴不变*/
}
div {
tranform:skewX(10deg); /*x轴倾斜10°,y轴不变*/
}
div {
tranform:skewY(10deg); /*y轴倾斜10°,x轴不变*/
}
3.缩放 scale()
使元素根据中心点进行缩放
与skew类似,同时有三种使用方式
参数为倍数
4.位移 translate()
同样有三种使用方式,表示向某个方向移动了多少像素
5.矩阵 matrix()
emmmm具体怎么计算不知道,慕课介绍是这样的
6.原点 transform-origin
用于改变元素中心点的位置,取值可以为left top等方位词
使用方式如下
div {
transfrom-origin : left top;
}