css3D语法transform

CSS 3D 中的 transform 属性用于定义元素的变换方式，包括平移、旋转、缩放、斜切等。

transform 属性有多个取值，其中常见的包括：

1. translate：用于定义元素的平移变换，可以设置 X 轴、Y 轴和 Z 轴的平移距离。

2. rotate：用于定义元素的旋转变换，可以设置 X 轴、Y 轴和 Z 轴的旋转角度。

3. scale：用于定义元素的缩放变换，可以设置 X 轴、Y 轴和 Z 轴的缩放比例。

4. skew：用于定义元素的斜切变换，可以设置 X 轴和 Y 轴的倾斜角度。

下面是一个例子，展示了如何使用 transform 属性实现一个立方体的效果：

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.cube .face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}

.cube .front {
  transform: translateZ(100px);
  background-color: #f00;
}

.cube .back {
  transform: rotateY(180deg) translateZ(100px);
  background-color: #0f0;
}

.cube .top {
  transform: rotateX(-90deg) translateZ(100px);
  background-color: #00f;
}

.cube .bottom {
  transform: rotateX(90deg) translateZ(100px);
  background-color: #ff0;
}

.cube .left {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: #f0f;
}

.cube .right {
  transform: rotateY(90deg) translateZ(100px);
  background-color: #0ff;
}

在这个例子中，我们定义了一个立方体容器 .cube，同时给它的每个面 .face 加上了不同的背景颜色。通过设置每个面的 transform 属性，我们让立方体相对于自身进行了平移、旋转和缩放等变换，从而实现了 3D 的效果。注意，我们还设置了 transform-style 属性为 preserve-3d，以保证子元素也可以继承父元素的 3D 特性。