CSS3中的3D转换允许你在三维空间中对元素进行变换。以下是一些常见的3D转换属性：

1. 平移（Translate）：
   transform: translate3d(x, y, z);
   这会将元素沿着 x、y 和 z 轴移动。

2. 缩放（Scale）：
   transform: scale3d(x, y, z);
   这会根据提供的 x、y 和 z 缩放因子，缩放元素。

3. 旋转（Rotate）：
   transform: rotate3d(x, y, z, angle);
   这会将元素绕着指定的轴进行旋转。

4. 倾斜（Skew）：
   transform: skew3d(x-angle, y-angle, z-angle);
   这会使元素在 x、y 和 z 轴上倾斜指定的角度。

5. 透视（Perspective）：
   perspective: value;
   这属性定义了观察者与元素之间的距离，影响透视效果。

6. 变换原点（Transform Origin）：
   transform-origin: x-axis y-axis z-axis;
   这会指定元素变换的原点，默认是元素的中心。

示例：
/* 平移 */
.element {
  transform: translate3d(50px, 30px, 20px);
}

/* 缩放 */
.element {
  transform: scale3d(1.5, 1.5, 1.5);
}

/* 旋转 */
.element {
  transform: rotate3d(1, 1, 1, 45deg);
}

/* 倾斜 */
.element {
  transform: skew3d(30deg, 20deg, 10deg);
}

/* 透视 */
.container {
  perspective: 1000px;
}

/* 变换原点 */
.element {
  transform-origin: top left 30px; /* x-axis y-axis z-axis */
}

这些属性可以结合使用，以创建更为复杂的三维效果。同样，请记得在使用这些属性时考虑不同浏览器的兼容性。


转载请注明出处：http://www.zyzy.cn/article/detail/4063/CSS