单位角度:deg
skew的默认原点transform-origin是这个物件的中心点
上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。
用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同
,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate
并且,每个变形之间用“空格”分隔符,而不是“,”
。
js
改变值的时候用景深给爷爷,风格给父亲
translate3d(tx,ty,tz)
其属性值取值说明如下:
tx:代表横向坐标位移向量的长度; ty:代表纵向坐标位移向量的长度; tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。
scale3d(sx,sy,sz)
sx:横向缩放比例; sy:纵向缩放比例; sz:Z轴缩放比例;
rotate3d(x,y,z,a)
x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值; y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值; z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值; a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
下面介绍的三个旋转函数功能等同:
rotateX(a)函数功能等同于rotate3d(1,0,0,a) rotateY(a)函数功能等同于rotate3d(0,1,0,a) rotateZ(a)函数功能等同于rotate3d(0,0,1,a)