CSS 3D 转换 详解
css3基础 2022-05-23 12:07:44小码哥的IT人生shichen
CSS 3D 转换
CSS 3D 转换
CSS 还支持 3D 转换。
请将鼠标悬停在下面的元素上，即可查看 2D 和 3D 转换之间的区别：
2D rotate
3D rotate
在本章中，您将学习如下 CSS 属性：
transform
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 3D 转换方法
通过 CSS transform 属性，您可以使用以下 3D 转换方法：
rotateX()rotateY()rotateZ()
rotateX() 方法
rotateX() 方法使元素绕其 X 轴旋转给定角度：
示例代码：
#myDiv {
transform: rotateX(150deg);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>rotateX() 方法</h1>
<p>rotationX() 方法将元素围绕其 X 轴旋转给定程度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素旋转了 150 度。
</div>
<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateX() 方法。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
rotateY() 方法
rotateY() 方法使元素绕其 Y 轴旋转给定角度：
示例代码：
#myDiv {
transform: rotateY(130deg);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>rotateY() 方法</h1>
<p>rotateY() 方法将元素围绕其 Y 轴旋转给定程度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素旋转了 150 度。
</div>
<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateY() 方法。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
rotateZ() 方法
rotateZ() 方法使元素绕其 Z 轴旋转给定角度：
示例代码：
#myDiv {
transform: rotateZ(90deg);
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>rotateZ() 方法</h1>
<p>rotateZ() 方法将元素围绕其 Z 轴旋转给定程度。</p>
<div>
这是一个普通的 div 元素。
</div>
<div id="myDiv">
该 div 元素旋转了 90 度。
</div>
<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateZ() 方法。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 转换属性
下表列出了所有 3D 变换属性：
| 属性 | 描述 |
|---|---|
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
CSS 3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
