CSS 变形

在 CSS3 出现之前，如果我们想旋转一张图片或让一个元素歪一点，几乎是不可能的（除非用图片代替）。而 “CSS 变形（Transform）” 的出现改变了一切。它允许我们在不改变文档流的情况下，对元素进行各种视觉上的变换，比如平移、缩放、旋转等。

CSS 变形语法

在 CSS 中，所有的变形效果都通过 “transform” 属性来定义的。

语法：

transform: 函数名(参数);

说明：

transform 接收一个或多个变形函数作为它的值，常用的变形函数有 4 个（如下表所示）。

1. 单个变形

如果你只想实现一种变形操作（比如旋转），直接写一个函数即可，比如：

/* 旋转 45 度 */
transform: rotate(45deg);

2. 组合变形

如果你想要同时实现多种变形操作，比如同时旋转和放大。此时我们应该在一个 transform 属性中写多个函数，然后中间用空格隔开，比如：

/* 正确：同时旋转 45 度并放大 1.5 倍 */
transform: rotate(45deg) scale(1.5);

需要注意的是，同时实现多种变形操作，不能用多个 transform 属性来实现，比如：

/* 错误：只有 scale(1.5) 会生效，rotate 被覆盖了 */
transform: rotate(45deg);
transform: scale(1.5);

这是因为如果有多个 transform 属性时，只有最后一个 transform 属性会生效，后面的会覆盖前面的。

CSS 2D 变形 vs 3D 变形

对于 CSS 变形来说，它可以分为以下 2 种：

• 2D 变形：只在 X 轴（水平）和 Y 轴（垂直）平面上变化。
• 3D 变形：引入了 Z 轴（景深），可以让元素在空间中 “立起来” 或 “翻转”。

在实际开发中，大多数情况下我们只会用到 2D 变形，因此在本章中我们将重点学习 2D 变形。等掌握了 2D 变形之后，感兴趣的小伙伴可以自行搜索了解一下 3D 变形。