在 CSS 中设置 3D 元素的基本位置

CSS 3D 变换可以使元素在 3D 空间中移动和旋转。本文将介绍如何在 CSS 中设置 3D 元素的基本位置。

坐标系

在 3D 空间中，我们需要有一个坐标系来表示位置。CSS 中使用的是右手坐标系。坐标系的三个轴分别为 X 轴、Y 轴和 Z 轴，如下图所示：

其中，X 轴是水平的，向右为正；Y 轴是垂直的，向下为正；Z 轴是垂直于屏幕的，从屏幕内向外为正。

transform-style 属性

为了使一个元素可以被视为 3D 元素，需要在其父元素上设置 transform-style: preserve-3d; 属性。

.container {
  transform-style: preserve-3d;
}

translate3d 属性

在 3D 空间中移动一个元素，可以使用 translate3d() 函数。该函数接受三个参数，分别表示元素在 X、Y、Z 轴上移动的距离。

例如，要使一个元素向右移动 100 像素，可以使用如下代码：

transform: translate3d(100px, 0, 0);

同理，要使一个元素向上移动 50 像素，可以使用如下代码：

transform: translate3d(0, -50px, 0);

rotate3d 属性

在 3D 空间中旋转一个元素，可以使用 rotate3d() 函数。该函数接受四个参数，分别表示围绕 X、Y、Z 轴旋转的角度和旋转中心的位置。

例如，要使一个元素绕 Y 轴顺时针旋转 45 度，可以使用如下代码：

transform: rotate3d(0, 1, 0, 45deg);

perspective 属性

为了让用户能够感受到元素在 3D 空间中的距离感，需要设置透视距离。可以使用 perspective() 函数来设置透视距离。该函数接受一个参数，表示透视距离。

例如，要使一个元素产生透视效果，可以使用如下代码：

.container {
  perspective: 500px;
}

综合示例

下面是一个在 3D 空间中旋转并移动的立方体的示例：

.container {
  perspective: 500px;
  transform-style: preserve-3d;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}

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

.cube .face.front {
  transform: translate3d(0, 0, 100px);
  background-color: #f00;
}

.cube .face.back {
  transform: rotate3d(1, 1, 0, 180deg) translate3d(0, 0, 100px);
  background-color: #0f0;
}

.cube .face.left {
  transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 100px);
  background-color: #00f;
}

.cube .face.right {
  transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px);
  background-color: #ff0;
}

.cube .face.top {
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 0);
  background-color: #f0f;
}

.cube .face.bottom {
  transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 100px, 0);
  background-color: #0ff;
}

@keyframes rotate {
  from {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

该示例会产生一个具有 3D 效果的立方体，旋转并移动着在空间中。具体实现可以查看 CodePen。

参考资料：

• CSS 3D 转换
• 坐标系