CSS中的transform属性用于更改视觉格式模型的坐标空间。这用于在元素上添加倾斜，旋转，平移等效果。
注意：转换可以是2-D或3-D类型。
用法:
transform:none|transform-functions|initial|inherit;
值：
| 值 | 描述 |
|---|---|
| none | 不进行任何转换。 |
| matrix(x, x, x, x, x, x) | 指定二维类型的矩阵转换。它需要6个值。 |
| matrix3d(x, x, x, x, x, x, x, x, x) | 指定3-D类型的矩阵转换。它需要9个值。 |
| translate(x, y) | 指定X和Y轴上的平移。 |
| translate3d(x, y, z) | 指定在X，Y和Z轴上的平移。 |
| translateX(x) | 仅指定X轴上的平移。 |
| translateY(y) | 仅指定沿Y轴的平移。 |
| translateZ(z) | 仅指定沿Z轴的平移。 |
| rotate(angle) | 指定旋转角度。 |
| rotateX(angle) | 指定对应于旋转角度的沿X轴的旋转。 |
| roatateY(angle) | 指定对应于旋转角度的沿Y轴的旋转。 |
| roteteZ(angle) | 指定对应于旋转角度的沿Z轴的旋转。 |
| scale(x, y) | 指定沿X和Y轴的比例转换。 |
| scale3d(x, y, z) | 指定沿X，Y和Z轴的比例转换。 |
| scaleX(x) | 指定沿X轴的比例转换。 |
| scaleY(y) | 指定沿Y轴的比例转换。 |
| scaleZ(z) | 指定沿Z轴的比例转换。 |
| scale3d(x, y, z) | 指定沿X，Y和Z轴的比例转换。 |
| skew(angle, angle) | 指定沿与倾斜角相对应的X和Y轴的倾斜变换。 |
| skewX(angle) | 指定对应于偏斜角的沿X轴的偏斜变换。 |
| skewY(angle) | 指定对应于偏斜角的沿Y轴的偏斜变换。 |
| skewZ(angle) | 指定对应于倾斜角的沿Z轴的倾斜变换。 |
| perspective(x) | 指定元素的透视图。参考：透视属性 |
| initial | 将元素初始化为其默认值。 |
| inherit | 从其父元素继承值。 |
范例1：没有转换属性。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html> 输出：
范例2：本示例描述Matrix()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:matrix(1, 0, -1, 1, 1, 0);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html> 输出：
范例3：本示例描述Matrix3d()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
transform-style:preserve-3d;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform-style:preserve-3d;
position:absolute;
transform:translate(150px, 75%, 5em)
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html> 输出：
范例4：本示例描述translate()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:translate(150px, 65%);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例5：本示例描述了translate3d()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:translate(150px, 65%, 5em);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例6：本示例描述translateX()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:translateX(150px);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例7：本示例描述translateY()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:translateY(150px);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例8：本示例描述translateZ()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:translateZ(150px);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例9：本示例描述rotate()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例10：本示例描述rotateX()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:rotateX(75deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例11：本示例描述rotateY()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:rotateY(75deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例12：本示例描述rotateZ()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:rotateZ(75deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例13：本示例描述scale()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:scale(1, 2);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例14：本示例描述scale3d()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:scale3d(2, 1, 5);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例15：本示例描述scaleX()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:scaleX(2);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
范例16：本示例描述scaleY()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:scaleY(2);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例17：本示例描述scaleZ()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:scaleZ(2);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例18：本示例描述skew()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:skew(30deg, 30deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例19：本示例描述skewX()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:skewX(30deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例20：本示例描述skewY()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:skewY(30deg);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例21：本示例描述perspective()属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:perspective(30px);
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例22：本示例描述初始属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:initial;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
示例23：本示例描述继承属性值。
<!DOCTYPE html>
<html>
<head>
<title>
CSS Transform Property
</title>
<style>
.main {
display:grid;
padding:30px;
background-color:green;
transform:rotateX(45deg);
}
.GFG {
text-align:center;
font-size:35px;
background-color:white;
color:green;
transform:inherit;
}
</style>
</head>
<body>
<div class = "main">
<div class = "GFG">GeeksForGeeks</div>
</div>
</body>
</html>输出：
注意：有时3D值在2D元素上使用时无法提供正确的输出，因此，不建议对2D元素使用3D值。
支持的浏览器：下面列出了transform属性支持的浏览器：
- 2D转换：
- Chrome 36.0、4.0 -webkit-
- 边10.0，9.0 -ms-
- Firefox 16.0、3.5 -moz-
- Safari 9.0、3.2 -webkit-
- Opera 23.0、15.0 -webkit-，10.5 -o-
- 3-D转换：
- Chrome 36.0、12.0 -webkit-
- 边12.0
- Firefox 10.0
- Safari 9.0、4.0 -webkit-
- Opera 23.0、15.0 -webkit-
相关用法
- CSS transform-origin用法及代码示例
- CSS text-transform属性用法及代码示例
- CSS transform-style用法及代码示例
- HTML Style transform用法及代码示例
- HTML canvas transform()用法及代码示例
- node.js Stream transform.destroy()用法及代码示例
- Collect.js transform()用法及代码示例
- d3.js zoom.transform()用法及代码示例
- d3.js transform.toString()用法及代码示例
- Lodash _.transform()用法及代码示例
- d3.js transform.invert()用法及代码示例
- d3.js transform.invertY()用法及代码示例
- d3.js transform.translate()用法及代码示例
- d3.js transform.scale()用法及代码示例
- d3.js transform.invertX()用法及代码示例
- SVG transform属性用法及代码示例
- CSS transition-property用法及代码示例
注：本文由纯净天空筛选整理自DannanaManoj大神的英文原创作品 CSS | transform Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。