AI教我用CSS画一个骰子

前段时间谷歌推出了Gemnini Pro 3.0，自媒体一片欢呼，称这是前端工程师最严厉的父亲。

我实际体验了一下Google AI Studio的Build功能（会输出Vite+TypeScript的工程文件），对一个前端开发经验较少的人来说，它确实在一定程度上降低了从0到1的实现想法难度。

我希望让AI创建一个有关骰子的应用，能自定义骰子的数量，点击一个显眼的按钮能够自动投掷。 我本来是它的实现方法是：创建一个Canvas，会用3D框架绘制骰子。 让我惊讶的是它单纯的用CSS去实现的这个功能。

首先第一步，画出来骰子的每一个面

要想好骰子每个面的大小，我认为100px就是个不错的选择。

用flex布局可以非常方便地实现骰子在画布上局中

.dice-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

第二步，给每个面上点上该有的点数

骰子的每个面都可以当成一个3x3的网格，黑点我们用SVG绘制。 由于我们没有使用任何编程框架，只能用笨办法。 我们从左到右，从上到下，依次把每个格子编号1-9，这用grid非常容易实现。

.die-face {
    display: grid
}

1号面，网格的5号位有黑点

2号面，网格的1号和9号位有黑点

以此类推。

第三步，把每个面放置妥当

骰子是一个空心立方体，我们现在每个面都堆叠在一起，要在3维空间中调整它们的位置。 对每个面，要把它们定位属性设置成绝对位置

.die-face {
    position: absolute
}

.die {
  transform-style: preserve-3d;
}

这样浏览器才会知道它接下来要进行3D变换，否则只是平面移动。

另外一个重要的点是： 在移动面的时候，要先平移，再旋转，否则它的基准坐标会变化

第四步，让骰子转起来

这就非常简单了，加给骰子的父元素加一个动画

@keyframes rolling {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
  }
}
.die:hover {
  transform-origin: 50px 50px 0;
  animation: rolling 3s ease-in-out;
  animation-iteration-count: infinite;
}

用CodePen展示一下效果