现在我们会使用基本的伪类选择器做效果了，但看到变化过程一闪而过、冷冰冰的，想增添更多渐变效果，让动态效果可以更多变化、更平滑动感，就要使用我们的 transform 与 transition 这两个属性。

transform 是做什麽的？

transform 属性是依靠 GPU 控制，修改 CSS 视觉模型的空间维度。

大多数的属性值预设都是操控平面维度的 X 轴 与 Y 轴，如果要再加上第三维度 Z 轴，需要额外添加。

使用方法为transform: 想进行控制的属性值方法，有多个属性值可以用空白键或换行做区隔。

以下的动态图，只是要区分元素与原本的差异，并不会有动态效果

进行平移的属性值 translate

你会发现跟 Position 定位元素很相似，同样都是移动元素，但他们不同的地方是，% 数参考的对象 与 GPU 的参与。注意 适当使用 GPU 可以减轻渲染负担，过度使用 GPU 容易消耗过多记忆体。

• 在执行动画效果时，Position 定位会触发浏览器的 reflow 和 repaint，让浏览器一直重新渲染画面，动画效果也因为最小单位 1px，感觉有一点卡卡的感觉。
  
  浏览器一直频繁的 reflow 和 repaint
• 而使用 translate 平移执行动画，则是透过 GPU 来控制，使用硬体加速，动画效果也比较平顺。
  
  依靠 GPU 不会触发浏览器的 reflow 和 repaint

使用方法transform: translate( X 轴, Y 轴 )，当只有使用一个值，该值代表 X 轴，如果想使用 Z 轴，就要改用translate3d(X 轴, Y 轴, Z 轴 ) 或 translateZ( Z 轴 )。

使用的值需要单位（px, %, em...），% 数是依照自身长宽当作参考，Z 轴只能使用长度单位（px, em...），因为深度没有 % 数。

进行缩放的属性值 scale

同样会发现与 宽高元素（height、width） 很相似，而不同的地方也如同上面的例子。

使用方法transform: scale( X 轴, Y 轴 )，当只有使用一个值，该值代表整体的放大缩小，如果想使用 Z 轴，就要改用scale3d(X 轴, Y 轴, Z 轴 ) 或 scaleZ( Z 轴 )。

使用的值为数字，1 为 1 倍大小，.8 为 0.8 倍大小

进行旋转的属性值 rotate

让元素进行旋转

使用方法transform: rotate( Z 轴 )，依靠 Z 轴旋转，如果想依靠 X 轴 或 y 轴，就要改用rotateX( X 轴 ) 或 rotateY( Y 轴 )。

使用的值需要单位

• deg（一个圆有 360 度），应该是最多人用的
• gard（一个圆有 400 个梯度）
• rad（一个圆有 2π 弧度）
• turn（一个圆）

另外也可以使用 rotate3d( X 轴, Y 轴, Z 轴, 角度)，其中 XYZ 轴为倍数，每个倍数乘以角度来呈现。

进行倾斜的属性值 skew

让元素沿着轴线倾斜

使用方法transform: skew( X 轴, Y 轴 )，当只有使用一个值，该值代表 X 轴，倾斜没有 Z 值。

变形矩阵的属性值 matrix

算是综合了上面的平移、缩放与倾斜的语法。
语法：matrix(X 轴缩放, X 轴平移, X 轴倾斜, Y 轴缩放, Y 轴平移, Y 轴倾斜)
我个人是不常用，参数太多容易搞混。

恭喜你又学会新的置中方法了

前面在 Position 定位章节有提到，用 Position 定位置中 top: 50%; left: 50%; 会因为元素基准点是在左上角，导致左上角定位在中心，元素整体会呈现偏右下方。

这时藉由 transform: translate(-50%, -50%);，因为 % 数是参考自身长宽，藉由 -50% 来矫正偏移问题，让元素呈现完美的置中。

总结

其实 transform 还有很多属性方法还没介绍，像是设定基准点、定位视角，这类更为抽象进阶的语法，也许会放到之後补充的地方，今天就先介绍简单常用入门的部分就好，下一个章节算是大家学 CSS 最想达成的动画章节。

参考资料

• 浅析 CSS 的效能优化