用Flex打造3D骰子：颠覆性CSS布局交互

2023-03-19 11:51:06

Flexbox 的神奇魔力：打造炫酷的 3D 骰子

准备好踏上一场探索 Flexbox 神奇力量的旅程了吗？它可是一个超级强大的布局模块，让你轻而易举地创建各种复杂布局，完全不需要浮动或绝对定位这些繁琐的操作。Flexbox 的精髓在于响应式布局，你可以毫不费力地调整元素大小和位置，轻松适应不同屏幕尺寸。

打造专属你的 3D 骰子

现在，让我们动手制作一个 3D 骰子。首先，你需要六个 div 元素，代表骰子的每个面。接着，运用 CSS 为这些元素赋予骰子应有的样式。

/* 骰子容器 */
.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* 骰子面 */
.dice-side {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* 六个面的定位 */
.dice-side--top {
  transform: translateZ(50px);
}

.dice-side--bottom {
  transform: translateZ(-50px);
}

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

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

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

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

添加灵动动画

是时候让骰子动起来了！借助 CSS 动画，你可以赋予骰子翻滚的效果。使用 animation 属性定义动画，@keyframes 规则定义动画的每个阶段。

/* 骰子翻滚动画 */
.dice {
  animation: roll 2s infinite linear;
}

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

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

实现交互式体验

交互感必不可少！使用 JavaScript 监听骰子的点击事件，然后切换骰子的 rolling 类，让骰子翻滚起来。

/* 获取骰子元素 */
const dice = document.querySelector('.dice');

/* 添加点击事件监听 */
dice.addEventListener('click', () => {
  /* 骰子翻滚切换 */
  dice.classList.toggle('rolling');
});

总结一下

使用 Flexbox 制作 3D 骰子可谓是一个有趣的挑战。Flexbox、CSS 动画和 JavaScript 的完美结合，让我们创造出令人印象深刻的交互式骰子。

常见问题解答