巧用 CSS 创造神奇 3D 立方体，引爆你的设计灵感

2024-02-07 02:09:51

CSS 3D 的魔力

CSS 3D 是一种强大的技术，它允许我们在网页中创建和操作三维元素。通过利用变换、透视和旋转等属性，我们可以为我们的设计添加令人难以置信的深度和维度。

1. 基本变换：平移、缩放和旋转

CSS 3D 变换让我们可以控制元素在三维空间中的位置和方向。使用 transform 属性，我们可以平移、缩放和旋转元素。

transform: translate(100px, 50px, 0);
transform: scale(2);
transform: rotateX(45deg);

2. 透视：营造深度感

透视属性为我们的 3D 场景添加了深度感，使元素看起来像是在一个三维空间中。通过设置透视距离，我们可以控制观察者到观察平面的距离。

perspective: 500px;

3. 旋转：创造动态效果

旋转属性允许我们围绕 X、Y 或 Z 轴旋转元素。这对于创建动态效果和旋转透视图至关重要。

transform: rotateX(30deg);
transform: rotateY(45deg);
transform: rotateZ(60deg);

打造 3D 立方体

现在我们已经了解了 CSS 3D 的基础知识，让我们动手创建一个 3D 立方体。

<div class="cube"></div>

.cube {
  width: 100px;
  height: 100px;
  depth: 100px;
  background-color: #ccc;
  transform-style: preserve-3d;
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.cube__face--front {
  transform: translateZ(50px);
}

.cube__face--back {
  transform: translateZ(-50px) rotateY(180deg);
}

.cube__face--left {
  transform: translateX(-50px) rotateY(-90deg);
}

.cube__face--right {
  transform: translateX(50px) rotateY(90deg);
}

.cube__face--top {
  transform: translateY(-50px) rotateX(-90deg);
}

.cube__face--bottom {
  transform: translateY(50px) rotateX(90deg);
}

通过将 transform-style 属性设置为 preserve-3d，我们告诉浏览器为元素及其子元素维护一个三维空间。然后，我们创建了六个子元素来表示立方体的六个面，并使用变换属性将它们定位在立方体周围。

旋转立方体

为了使我们的立方体更具互动性，我们可以使用 CSS 动画或交互式 JavaScript 来旋转它。

@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: spin 5s infinite linear;
}