創(chuàng)建一個(gè)3D立方體需設(shè)置包含透視效果的場(chǎng)景和立方體結(jié)構(gòu)；2. 使用perspective和transform-style: preserve-3d啟用3D空間；3. 通過(guò)rotateX、rotateY和translateZ定位六個(gè)面；4. 可選添加動(dòng)畫(huà)實(shí)現(xiàn)自動(dòng)旋轉(zhuǎn)；5. 注意面的尺寸一致、背面孔隱藏及中心點(diǎn)調(diào)整，最終用純CSS在現(xiàn)代瀏覽器中呈現(xiàn)3D立方體效果。

Creating a 3D cube with CSS transforms is a great way to learn about 3D transformations in CSS. It involves positioning six faces (divs) in 3D space to form a cube, using perspective, transform-style: preserve-3d, and rotateX, rotateY, and translateZ functions.

Here’s how to do it step by step:

? 1. Set up the HTML structure

You need a wrapper (to set the 3D perspective) and a cube container that holds six faces.

<div class="scene">
  <div class="cube">
    <div class="face front">front</div>
    <div class="face back">back</div>
    <div class="face right">right</div>
    <div class="face left">left</div>
    <div class="face top">top</div>
    <div class="face bottom">bottom</div>
  </div>
</div>

? 2. Apply basic CSS for 3D rendering

The .scene acts as the viewer — it sets the perspective so we see depth.

.scene {
  width: 200px;
  height: 200px;
  perspective: 400px; /* Distance from viewer to cube */
  margin: 100px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Keeps children in 3D space */
  transform: rotateX(-20deg) rotateY(30deg); /* Initial rotation to see 3 sides */
  animation: spin 8s infinite linear; /* Optional: auto-rotate */
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(0, 123, 255, 0.3);
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-family: sans-serif;
}

? transform-style: preserve-3d is essential — without it, child elements get flattened.

? 3. Position each face of the cube

Use translateZ to push each face outward, then rotate them into place.

.front  { transform: rotateY(0deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

? The translateZ(100px) assumes the cube is 200px wide, so half the size (100px) pushes each face to the edge.

? 4. (Optional) Add animation

Make the cube rotate automatically:

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

? 5. Key tips and common issues

• Size consistency: All faces and the cube should have the same width/height.
• Perspective: Lower values (e.g. 200px) create a more dramatic 3D effect; higher values feel flatter.
• Backface visibility: You might see faces through others. Fix with:

  .face {
    backface-visibility: hidden;
  }

• Centering: Use transform-origin if you want to rotate around a different point.

---

? Final Notes

This technique uses pure CSS — no JavaScript needed. It's supported in all modern browsers. You can enhance it with hover effects, interactive rotation via JS, or textured backgrounds.

Basically, it's just six squares, carefully rotated and moved in 3D space to form a cube. Once you understand translateZ and rotateX/Y, it becomes intuitive.

以上是如何使用CSS變換創(chuàng)建3D立方體？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！