CSS transform 语法
在 CSS 中，transform 属性用于对元素进行 2D 或 3D 变换。
语法：
transform: 函数;说明：
transform 是一个 CSS 函数，常用的函数如下表所示。
| 平移 | |
| translate() | 在 2D 平面上移动元素 |
| translateX() | 只在水平方向上移动元素 |
| translateY() | 只在垂直方向上移动元素 |
| translate3d() | 在 3D 空间中移动元素 |
| translateZ() | 在 3D 空间的 Z 轴上移动元素（需要设置 perspective） |
| 缩放 | |
| scale() | 在 2D 平面上缩放元素 |
| scaleX() | 只在水平方向上缩放元素 |
| scaleY() | 只在垂直方向上缩放元素 |
| scale3d() | 在 3D 空间中缩放元素 |
| scaleZ() | 在 3D 空间的 Z 轴上缩放元素（需要设置 perspective） |
| 旋转 | |
| rotate() | 在 2D 平面上旋转元素 |
| rotateX() | 沿 X 轴旋转元素 |
| rotateY() | 沿 Y 轴旋转元素 |
| rotate3d() | 沿 3D 空间中定义的向量旋转元素 |
| rotateZ() | 沿 3D 空间的 Z 轴旋转元素 |
| 倾斜 | |
| skew() | 在 2D 平面上倾斜元素 |
| skewX() | 只在水平方向上倾斜元素 |
| skewY() | 只在垂直方向上倾斜元素 |
| 矩阵 | |
| matrix() | 在 2D 平面上应用自定义的 2D 变换矩阵 |
| matrix3d() | 在 3D 空间中应用自定义的 3D 变换矩阵 |
注意:
- transform 属性只能用于块级元素和内联块级元素，而不能用于行内元素。
- transform 属性的默认变换原点是元素的中心（transform-origin: center center;），不过我们可以通过 transform-origin 属性来改变这个原点。
CSS transform 摘要
| 属于 | CSS3 变换 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS transform 示例
接下来，我们通过几个简单的例子来讲解一下 CSS transform 属性是如何使用的。
示例 1：transform 实现元素平移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
transition: transform 0.5s;
}
div:hover {
transform: translate(200px, 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
transform: translate(200px, 0) 表示将 div 元素沿水平方向向右移动 200px，然后垂直方向移动为 0。
示例 2：transform 实现元素缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transition: transform 0.25s;
}
div:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们设置 transform: scale(1.2);，此时当鼠标移到 div 元素上时，div 元素会在水平和垂直这 2 个方向同时放大 1.2 倍。下面 2 种写法是等价的。
/* 写法1 */
transform: scale(1.2);
/* 写法2 */
transform: scale(1.2, 1.2);示例 3：transform 实现元素倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: skew(20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，transform: skew(20deg) 表示将 div 元素沿 X 轴倾斜 20 度，来创建平行四边形效果。由于这里并没有指定 Y 轴倾斜角度，此时 Y 轴倾斜角度会使用默认值（即 0），因此最终只会影响水平方向。
示例 4：transform 实现元素旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，transform: rotate(45deg) 表示将 div 元素顺时针旋转 45 度。旋转只影响元素的可视方向，原始空间在文档流中保持不变。
