transform 属性应用于元素的 2D 或 3D 转换。这个属性允许将元素进行移动 (translate)、旋转 (rotate)、缩放 (scale) 或倾斜 (skew) 等。
语法：
transform: none|transform-functions;
值：
- none：定义不进行转换
- transform-function：表示一个或多个变换函数，以空格分开
translate 位移
| 值 | 描述 |
|---|---|
| translate(x,y) | 定义 2D 转换 |
| translate3d(x,y,z) | 定义 3D 转换 |
| translateX(x) | 定义转换，只是用 X 轴的值 |
| translateY(y) | 定义转换，只是用 Y 轴的值 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值 |
（1）translate(x轴位移，y轴位移) - 元素沿X轴、Y轴进行平移; 正值-右下方移动，负值-左上方移动
div {
margin:30px;
width:200px;
height:100px;
background: red;
transform:translate(80px, 80px)
}
（2）translateX(x轴位移) - 元素沿X轴进行平移；正值-右方移动，负值-左方移动
div {
margin:30px;
width:200px;
height:100px;
background: red;
transform:translateX(80px)
}
（3）translateY(y轴位移) - 元素沿Y轴进行平移；正值-下方移动，负值-上方移动
div {
margin:30px;
width:200px;
height:100px;
background: red;
transform:translateY(80px)
}
rotate 旋转
| 值 | 描述 |
|---|---|
| rotate(angle) | 定义 2D 旋转，在参数中规定角度 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转 |
rotate(旋转角度) - 元素以图形中心点为旋转中心，正值-顺时针旋转；负值-逆时针旋转；
div {
margin:30px;
width:200px;
height:100px;
background: red;
transform:rotate(15deg)
}
scale 缩放
| 值 | 描述 |
|---|---|
| scale(x[,y]?) | 定义 2D 缩放转换 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换 |
（1）scale(X轴缩放倍数，Y轴缩放倍数) - 基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数；0~1: 缩小；> 1：放大；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:scale(1.2,1.6)
}
（2）scaleX(X轴缩放倍数) - 基于原来的位置对X轴进行伸缩变换，Y轴不变；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:scaleX(1.4)
}
（）scaleY(Y轴缩放倍数) - 基于原来的位置对Y轴进行伸缩变换，X轴不变；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:scaleY(1.4)
}
skew 2D倾斜
| 值 | 描述 |
|---|---|
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换 |
（1）skew(X轴扭曲角度，Y轴扭曲角度) - 沿着 X 轴和 Y 轴进行 2D 倾斜；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skew(30deg, 10deg)
}
（2）skewX(X轴扭曲角度) - 沿着X轴进行 2D 倾斜,Y轴不倾斜；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skewX(30deg)
}
（3）skewY(Y轴扭曲角度) - 沿着Y轴进行2D倾斜,X轴不倾斜；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skewY(10deg)
}
