transform语法
transform: none|transform-functions [transform-functions]* ;
可以有多个变形
坐标轴说明
z轴是垂直屏幕指向我们的
https://codepen.io/bb798sky/pen/MNPedL
拿x、y、z旋转示例
可以从这个例子看出
rotateX 是屏幕水平轴旋转了,所以高度变小了。
rotateY 是屏幕垂直轴旋转了,所以宽度变小了
rotateZ 是屏幕对着我们的轴旋转了,这也是rotate默认的旋转属性
2D变形函数
xy偏移/xy缩放/z旋转/左右倾斜
函数 | 描述 | dsadsa |
---|---|---|
translate | 接受两个参数x轴偏移和y轴偏移,相当于是translateX和translateY的缩写 | d |
scale | 缩放,相当于是scaleX和scaleY的缩写 | |
rotate | 2d旋转,也就是默认的Z轴旋转 | |
skew | 倾斜,相当于skewX、skewY缩写 左右倾斜 |
3D变形函数
Z偏移/Z缩放/XY旋转/透视/matrix
函数 | 描述 |
---|---|
trnaslateZ | 指定在Z轴上的位移量 |
trnaslate3d | |
scaleZ | Z轴缩放 |
scale3d | |
rotateX | |
rotateY | |
rotate3d | 前三个取值0-1,表示x、y、z相对于第四个参数旋转的比例transform:scale3d(1,1,1,45deg) 相当于 transform: rotateZ(45deg) rotateY(45deg) rotateX(45deg); |
perspective | 透视矩阵 |
matrix3d | 定义矩阵变形 |
transform-origin属性
transform-origin属性用来指定元素的中心店位置。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin