CSS 还支持 3D 转换。
将鼠标悬停在下面的元素上可查看 2D 之间的差异 和 3D 变换:
在本章中,您将了解以下 CSS 属性:
transform
表中的数字指定完全支持该属性的第一个浏览器版本。
Property | |||||
---|---|---|---|---|---|
transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
通过 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>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
rotateY()
方法rotateY()
方法将元素绕其 Y 轴旋转给定角度:
#myDiv
{
transform: rotateY(150deg);
}
自己尝试一下→
<!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>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</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>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html>
下表列出了所有 3D 变换属性:
对元素应用 2D 或 3D 变换
允许您更改变换元素的位置
指定如何在 3D 空间中渲染嵌套元素
指定如何查看 3D 元素的视角
指定 3D 元素的底部位置
定义元素在不面向屏幕时是否可见
使用 16 个值的 4x4 矩阵定义 3D 变换
定义 3D 平移
仅使用 X 轴的值定义 3D 平移
仅使用 Y 轴的值定义 3D 平移
仅使用 Z 轴的值定义 3D 平移
定义 3D 比例变换
通过给出 X 轴的值来定义 3D 比例变换
通过给出 Y 轴值来定义 3D 比例变换
通过给定 Z 轴值来定义 3D 比例变换
定义 3D 旋转
定义沿 X 轴的 3D 旋转
定义沿 Y 轴的 3D 旋转
定义沿 Z 轴的 3D 旋转
定义 3D 变换元素的透视图