解锁创意骰子：HTML+CSS呈现的3D动画体验

2023-11-18 14:58:10

3D骰子动画：点亮你的网页设计

网页设计是一个不断进化的领域，总是寻求提升用户体验和视觉吸引力的新方法。3D元素的引入为网站带来了新的维度，增加了沉浸感和交互性。其中，3D骰子动画就是一种迷人的效果，可以应用于各种场景，如游戏、竞赛或模拟。

揭秘3D骰子动画的秘密

创建3D骰子动画涉及HTML、CSS和JavaScript的巧妙结合。让我们逐一探索这些技术的用法：

HTML结构

首先，使用HTML创建一个六面骰子的结构：

<div id="dice">
  <div class="face top"></div>
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="face bottom"></div>
</div>

每个面都分配了一个CSS类，以便我们在CSS中对其进行样式化和动画处理。

CSS样式

CSS为骰子赋予了3D外观和位置：

#dice {
  width: 100px;
  height: 100px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.top {
  transform: translateZ(50px);
}

.front {
  transform: rotateX(90deg) translateZ(50px);
}

.back {
  transform: rotateX(-90deg) translateZ(50px);
}

.left {
  transform: rotateY(90deg) translateZ(50px);
}

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

.bottom {
  transform: rotateX(180deg) translateZ(50px);
}

骰子的整体样式定义了宽高、透视和3D变换。每个面都被绝对定位并隐藏了背面，并使用旋转和平移变换设置了不同的位置。

动画效果

当鼠标悬停在骰子上时，CSS动画使骰子旋转：

#dice:hover {
  animation: roll 1s infinite linear;
}

@keyframes roll {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

关键帧动画定义了骰子从0度旋转到360度的过程。

JavaScript交互

JavaScript为动画增加了交互性：

const dice = document.getElementById("dice");

dice.addEventListener("click", () => {
  // 生成随机数并存储在变量中
  const randomNum = Math.floor(Math.random() * 6) + 1;

  // 根据随机数显示数字
  switch (randomNum) {
    case 1:
      dice.classList.remove("face-2", "face-3", "face-4", "face-5", "face-6");
      dice.classList.add("face-1");
      break;
    case 2:
      dice.classList.remove("face-1", "face-3", "face-4", "face-5", "face-6");
      dice.classList.add("face-2");
      break;
    // 依此类推，添加其他情况
  }
});