CSS第八天----2D和3D

在CSS中，我们可以使用2D转换和3D转换来创建动态和交互式的网页。

2D转换：

• translate()：元素从其当前位置移动。
• rotate()：元素旋转给定的角度。
• scale()：元素的尺寸会增加或减少。
• skew()：元素倾斜给定的角度。

3D转换：

• translate3d()：定义3D转换，通过z轴的值进行位置变换。
• rotate3d()：定义3D旋转。
• scale3d()：定义3D缩放。
• perspective()：为3D转换元素定义透视视图。

以下是一些示例代码：

2D转换示例：

div {
  transform: translate(50px, 100px); /* 向右移动50px，向下移动100px */
}
 
div {
  transform: rotate(30deg); /* 顺时针旋转30度 */
}
 
div {
  transform: scale(1.5, 2); /* 水平方向放大1.5倍，垂直方向放大2倍 */
}
 
div {
  transform: skew(30deg, 20deg); /* 沿X轴倾斜30度，沿Y轴倾斜20度 */
}

3D转换示例：

div {
  transform: translate3d(100px, 200px, 50px); /* 向前移动50px，向右移动100px，向下移动200px */
}
 
div {
  transform: rotate3d(1, 1, 0, 30deg); /* 沿右手定则的方向旋转一个30度的角 */
}
 
div {
  transform: scale3d(1.5, 2, 1.2); /* 水平方向放大1.5倍，垂直方向放大2倍，Z轴放大1.2倍 */
}
 
div {
  perspective: 500px; /* 定义3D元素的透视视图，距离视图的距离为500px */
}

注意：为了使3D转换生效，你需要在父元素上设置transform-style: preserve-3d;，使得子元素在3D空间中呈现。