纯css实现一个3D骰子

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

介绍

之前在策划一款游戏的时候，想做一个3D的骰子来作为游戏的一个内容，但是网上找到的都不是特别的满意，所以我们就来自己实现一个3D的骰子。

代码块

制作介绍

骰子制作

我们新建一个盒子用来代表骰子，并且骰子有6个面，说明我们需要用到6个div分别代表六个面

 <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</div>

然后解释六个面每个面的图片。我们这里是使用了雪碧图来进行渲染，后续要纯css的话可以考虑用flex来实现。

.box > div {
    width: 100px;
    height: 100px;
    position: absolute;
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6c0f759864249a39416e3a53e2408f0~tplv-k3u1fbpfcp-watermark.image?");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}

然后需要实现骰子的3D效果，这点在css中是有相关的支持的，我们需要开启3D支持，并且为每一个面进行旋转和平移

/* 设置3d变形效果 */
transform-style: preserve-3d;

.box1 {
    background-position: 0 0;
    transform: rotateY(90deg) translateZ(50px);
}

.box2 {
    background-position: -100px 0;
    transform: rotateY(-90deg) translateZ(50px);
}
.box3 {
    background-position: -300px 0;
    transform: rotateX(90deg) translateZ(50px);
}
.box4 {
    background-position: -400px 0;
    transform: rotateX(-90deg) translateZ(50px);
}
.box5 {
    background-position: -500px 0;
    transform: rotateZ(90deg) translateZ(50px);
}
.box6 {
    background-position: -600px 0;
    transform: rotateZ(0deg) translateZ(50px);
}

到目前为止，我们就成功只做了一个3D的骰子出来

让骰子动起来

接着我们需要让骰子转起来，这里就要用到css的动画，设定一个动画，指定骰子在一定的时间内旋转一周。

@keyframes rotate {
    from {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    to {
        transform: rotateX(1turn) rotateY(1turn) rotateZ(0);
    }
}

并且把这个动画绑定到我们的骰子上面

.box {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    /* 设置3d变形效果 */
    transform-style: preserve-3d;
    animation: rotate 0.5s infinite linear;
}

这样子设置完之后，骰子就能够动起来了。

让骰子停下来

这里我们可以运用到 HTMl 中 label 标签的一个特性，在使用 label 标签的时候，我们可以用它来绑定一个表单标签，这样可以将两个元素做一个关联，点击 label 的时候，表单标签也会做出相应的变化

<input type="checkbox" id="dice" />

<label for="dice">
  <div class="box">
    <!-- 引入图片 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
  </div>
</label>

这样我们就可以在这个表单元素上面绑定上css，用来控制在点击触发的时候去停掉骰子的动画效果。

#dice:checked + label .box {
    animation-play-state: paused;
}

那么到目前为止，我们就完成了这个骰子的一个全部基础，现在只是简单地实现了一个能够动起来的骰子。

总结

目前骰子支持的功能可能不多，之后可能会在加上js代码来对它进行一个扩展，支持更多的功能，以至于变成一个真的能够拿来使用的，分装完整的骰子插件，这些都会在之后做出扩展实现。