transform在CSS中是什么意思
最新回答
本性难移
2026-05-12 19:27:11
在CSS中，transform是用于改变元素形状或位置的属性，通过2D或3D转换实现旋转、缩放、移动、扭曲等视觉效果。它是CSS3新增的核心属性，支持多种转换函数组合使用。
主要功能与转换函数
transform的语法为：transform: none | transform-functions;，其中none表示无变换，transform-functions可包含一个或多个以下函数（以空格分隔）：
1. 旋转（Rotate）
通过角度参数控制元素旋转方向与幅度：
- rotate(angle)：2D旋转，正值为顺时针，负值为逆时针。例如：transform: rotate(45deg);
- rotate3d(x,y,z,angle)：3D旋转，需指定旋转轴与角度。
- rotateX/Y/Z(angle)：分别沿X/Y/Z轴进行3D旋转。例如：transform: rotateX(45deg);
基点控制：默认以元素中心为旋转基点，可通过transform-origin: x-axis y-axis z-axis;调整，如transform-origin: 100% 100%;表示右下角。
2. 移动（Translate）
通过坐标参数平移元素位置：
- translate(x,y)：2D平移，x为水平距离，y为垂直距离。例如：transform: translate(50px, -20px);
- translateX/Y(value)：仅沿X/Y轴移动。
- translate3d(x,y,z)与translateZ(z)：实现3D空间移动，z轴垂直于屏幕。
3. 缩放（Scale）
通过倍数参数调整元素尺寸：
- scale(x,y)：2D缩放，x为水平倍数，y为垂直倍数（可选，默认与x相同）。例如：transform: scale(0.5, 1.5);
- scaleX/Y(value)：仅沿X/Y轴缩放。
- scale3d(x,y,z)与scaleZ(z)：实现3D缩放。
4. 扭曲（Skew）
通过角度参数倾斜元素形状：
- skew(x-angle,y-angle)：2D扭曲，x为水平倾斜角，y为垂直倾斜角（可选，默认0deg）。例如：transform: skew(10deg, 20deg);
- skewX/Y(angle)：仅沿X/Y轴倾斜。
3D效果支持
若需实现3D转换，需额外设置transform-style: preserve-3d;，确保子元素在3D空间中正确渲染。
注意事项
- 转换函数可组合使用，如transform: rotate(45deg) scale(1.2);。
- 默认基点为元素中心，可通过transform-origin调整。
- 3D转换需浏览器支持CSS3，且部分函数（如rotate3d）使用频率较低。
热门标签
