使用 CSS 旋转 3D 图像预览器立方体

在 web 开发中，使用 CSS 3D 变换创建立方体是无聊但常见的。本文将指导您创建一个可以通过轻触或鼠标单击旋转的 3D 立方体。

HTML 结构

首先，我们需要一个包含 6 个面的 HTML 结构。为了使立方体相对于其容器居中，我们将其放在一个 div 容器内，并应用样式来定位它。

<div class="cube-container">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

CSS 样式

在样式表中，我们定义了容器和立方体的外观和布局。这些样式允许我们指定立方体的大小和位置，并使其符合我们的设计。

/* 容器样式 */
.cube-container {
  perspective: 1000px; /* 透视视角 */
  margin: 0 auto;
  width: 300px;
  height: 300px;
}

/* 立方体样式 */
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 保持 3D 效果 */
  transition: transform 1s; /* 过渡动画 */
}

/* 六个面样式 */
.front, .back, .top, .bottom, .left, .right {
  position: absolute;
  width: 300px;
  height: 300px;
  background-size: cover;
}

.front {
  transform: translateZ(150px);
}

.back {
  transform: rotateY(180deg) translateZ(150px);
}

.top {
  transform: rotateX(90deg) translateZ(150px);
  transform-origin: top;
}

.bottom {
  transform: rotateX(-90deg) translateZ(150px);
  transform-origin: bottom;
}

.left {
  transform: rotateY(-90deg) translateZ(150px);
  transform-origin: left;
}

.right {
  transform: rotateY(90deg) translateZ(150px);
  transform-origin: right;
}

JavaScript 代码

最后，我们需要使用 JavaScript 创建一个交互式立方体。下面是一个可供参考的 JavaScript 代码片段。

const cube = document.querySelector(".cube");
let clicked = false;
let currentX, currentY, initialX, initialY, xOffset = 0, yOffset = 0;
document.addEventListener("mousedown", dragStart);
document.addEventListener("mouseup", dragEnd);
document.addEventListener("mousemove", drag);
document.addEventListener("touchstart", dragStart, { passive: false });
document.addEventListener("touchend", dragEnd);
document.addEventListener("touchmove", drag, { passive: false });
 
function dragStart(e) {
  initialX = e.clientX - xOffset;
  initialY = e.clientY - yOffset;
  if (e.type === "touchstart") {
    initialX = e.touches[0].clientX - xOffset;
    initialY = e.touches[0].clientY - yOffset;
  }
  if (e.target === cube) {
    clicked = true;
  }
}
 
function dragEnd(e) {
  initialX = currentX;
  initialY = currentY;
  clicked = false;
}
 
function drag(e) {
  if (clicked) {
    e.preventDefault();
    currentX = e.clientX - initialX;
    currentY = e.clientY - initialY;
    if (e.type === "touchmove") {
      currentX = e.touches[0].clientX - initialX;
      currentY = e.touches[0].clientY - initialY;
    }
    xOffset = currentX;
    yOffset = currentY;
    setCubeTransform(currentX, currentY);
  }
}
 
function setCubeTransform(x, y) {
  cube.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
}

结论

通过组合 HTML、CSS 和 JavaScript，我们创建了一个有趣的交互式 3D 立方体。现在您可以用这些知识来探索和构建更复杂的 3D 应用程序，例如游戏和模型查看器！

注意：此示例可能不会在所有浏览器中完美运行。在生产环境中使用时，应该进行浏览器测试和兼容性检查。