rotate 旋转 deg
rotateX/rotateY/rotateZ
skew 斜切 deg
skewX/skewY
正值 拉 左上角 和 右下角
负值 拉 右上角 和 左下角
scale 缩放 (原始大小的多少倍)
scaleX/scaleY
rotate、skew、scale默认都是围绕着元素的中心点进行变化的
translate
translateX/translateY/translateZ
translateZ 前后移动 负值向后移动 正值 向前移动
perspective 景深
rotateX/rotateY/rotateZ
skew 斜切 deg
skewX/skewY
正值 拉 左上角 和 右下角
负值 拉 右上角 和 左下角
scale 缩放 (原始大小的多少倍)
scaleX/scaleY
rotate、skew、scale默认都是围绕着元素的中心点进行变化的
translate
translateX/translateY/translateZ
translateZ 前后移动 负值向后移动 正值 向前移动
perspective 景深
transform 的执行循序 后写的先执行 后执行者基于先执行者进行操作
transform-origin 变换原点 center center;
关键字: top bottom center left right;
具体的长度单位(em,rem,px...)
会受到原点影响的变换有:rotate、skew、scale
隐藏背面:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;