码农教程 - 一技在手,衣食无忧! tools

目录

CSS 3D 变换

❮ 上一节 下一节 ❯

CSS 3D 变换

CSS 还支持 3D 转换。

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

2D 旋转
3D旋转

在本章中，您将了解以下 CSS 属性：

  • transform

浏览器支持

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

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 3D 转换方法

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

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() 方法

Rotate X

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

示例

#myDiv {
  transform: rotateX(150deg);
}
亲自试一试 »

rotateY() 方法

Rotate Y

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

示例

#myDiv {
  transform: rotateY(150deg);
}
亲自试一试 »

rotateZ() 方法

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

示例

#myDiv {
  transform: rotateZ(90deg);
}
亲自试一试 »

通过练习测试一下

练习:

随着transform属性，将 <div> 元素绕其 X 轴旋转 150 度。

<style>
div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  : ;
}
</style>

<body>
  <div>This is a div</div>
</body>

开始练习

CSS 变换属性

下表列出了所有 3D 变换属性：

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when not facing the screen

CSS 3D 变换方法

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)		 Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

❮ 上一节 下一节 ❯