html+css写一个旋转的3d骰子

1.HTML结构

   <div class="box">
      <div class="con1">1</div>
      <div class="con2">2</div>
      <div class="con3">3</div>
      <div class="con4">4</div>
      <div class="con5">5</div>
      <div class="con6">6</div>
    </div>

2.CSS

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 300px;
  height: 300px;
  position: fixed;
  /* 盒子居中start */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /* 盒子居中end */
  /* 用于设置元素的 3D 变换模式。 */
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(30deg);
  transition: 2s;
  animation: rotate 4s infinite;
}

/* 旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate3d(1, 1, 1, 180deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, -180deg);
  }
}

.box div {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 100px;
  font-weight: bolder;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  border: 2px solid #000;
  backface-visibility: hidden;
}

.con1 {
  /* 第一个面往前走 */
  background: red;
  transform: translateZ(150px);
}

.con2 {
  /* 第二个面往后走 */
  background: blue;
  transform: translateZ(-150px) rotateY(180deg);
  /*rotateY(180deg)  让正面朝外*/
}

.con3 {
  /* 先往上位移150px  再绕着X轴转动90deg */
  background: pink;
  transform: translateY(-150px) rotateX(90deg);
}

.con4 {
  /* 先往下位移150px,再绕着X轴转动90deg */
  background: green;
  transform: translateY(150px) rotateX(-90deg);
}

.con5 {
  /* 先往左位移150px , 再绕着Y轴转动90deg */
  background: rosybrown;
  transform: translateX(-150px) rotateY(-90deg);
}

.con6 {
  /* 先往右侧位移150px,再绕着Y轴转动90deg */
  background: #000;
  transform: translateX(150px) rotateY(90deg);
}

3.效果图

4.教学

操作比较简单,后续写一个详细的博客介绍用到的东西