CSS 3D 变换


目录

    显示目录


CSS 3D 变换

CSS 还支持 3D 转换。

将鼠标悬停在下面的元素上可查看 2D 之间的差异 和 3D 变换:

2D rotate
3D rotate

在本章中,您将了解以下 CSS 属性:

  • transform

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

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





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)

使用 16 个值的 4x4 矩阵定义 3D 变换

translate3d(x,y,z)

定义 3D 平移

translateX(x)

仅使用 X 轴的值定义 3D 平移

translateY(y)

仅使用 Y 轴的值定义 3D 平移

translateZ(z)

仅使用 Z 轴的值定义 3D 平移

scale3d(x,y,z)

定义 3D 比例变换

scaleX(x)

通过给出 X 轴的值来定义 3D 比例变换

scaleY(y)

通过给出 Y 轴值来定义 3D 比例变换

scaleZ(z)

通过给定 Z 轴值来定义 3D 比例变换

rotate3d(x,y,z,angle)

定义 3D 旋转

rotateX(angle)

定义沿 X 轴的 3D 旋转

rotateY(angle)

定义沿 Y 轴的 3D 旋转

rotateZ(angle)

定义沿 Z 轴的 3D 旋转

perspective(n)

定义 3D 变换元素的透视图