CSS3 3D 转换

CSS 3D 转换

CSS 还支持 3D 转换。

请将鼠标悬停在下面的元素上，即可查看 2D 和 3D 转换之间的区别：

2D rotate

3D rotate

在本章中，您将学习如下 CSS 属性：transform

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
transform	36.0	10.0	16.0	9.0	23.0

CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()
rotateY()
rotateZ()

rotateX() 方法

Rotate X

rotateX() 方法使元素绕其 X 轴旋转给定角度：

<!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>

运行一下

rotateY() 方法

Rotate Y

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

<!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>

运行一下

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

<!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>

运行一下

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 转换元素的透视视图。

CSS3 3D 转换

CSS 3D 转换

浏览器支持

CSS 3D 转换方法

rotateX() 方法

rotateY() 方法

rotateZ() 方法

CSS 转换属性

CSS 3D 转换方法

分类导航