文章目录

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