语法如下：
transform: transform-function;
其中 transform-function 是一个或多个变换函数的组合，例如：
- translate(): 平移元素。
- rotate(): 旋转元素。
- scale(): 缩放元素。
- skew(): 倾斜元素。
- matrix(): 指定一个 2D 转换矩阵。
示例：
/* 平移元素，向右移动20像素，向下移动30像素 */
.translate-example {
transform: translate(20px, 30px);
}
/* 旋转元素，顺时针旋转45度 */
.rotate-example {
transform: rotate(45deg);
}
/* 缩放元素，水平和垂直方向都放大2倍 */
.scale-example {
transform: scale(2);
}
/* 倾斜元素，水平方向倾斜30度 */
.skew-example {
transform: skew(30deg, 0);
}
/* 自定义矩阵变换 */
.matrix-example {
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}
这些样式规则将应用于相应元素，使用 transform 属性可以实现多样化的变换效果。需要注意的是，transform 不会改变元素的文档流位置，只影响视觉呈现。此外，transform 是一个累积的属性，多个变换函数可以同时应用。
转载请注明出处：http://www.zyzy.cn/article/detail/4255/CSS