变形

通过 CSS 来改变元素的形状或位置，不会影响页面的布局：

transform 用来设置元素的变形效果。

平移

• translateX() 沿着 x 轴方向平移
• translateY() 沿着 y 轴方向平移
• translateZ() 沿着 z 轴方向平移

括号内的百分比是相对于自身计算的；

🌰 例子 / 三种元素居中方法对比：

• 绝对定位法：适用于元素的大小确定时；
• table-cell 法：具有一定的局限性；

🌰 例子 ：

Z 轴平移

transformZ()

旋转

通过旋转可以使元素沿着 x、 y 或 z 旋转指定的角度

• rotateX()
• rotateY()
• rotateZ()

缩放

对元素进行缩放的函数：

• scalex() 水平方向缩放

• scaleY() 垂直方向缩放

• scale() 双方向的缩放

🌰 例子：