效果预览

思路图解

首先我们要实现一个立方体

如上图，我们可以得出我们需要一个拥有6个子元素的盒子

  <div class="diceContainer">
    <div class="diceItem one">1</div>
    <div class="diceItem two">2</div>
     <div class="diceItem three">3</div>
    <div class="diceItem four">4</div>
    <div class="diceItem five">5</div>
    <div class="diceItem six">6</div>  
  </div>

分别为其设置宽高和背景颜色

.diceContainer{
  width: 100px;
  height: 100px;
  .diceItem{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 60px;
  }
  .one{
    background-color: rgba(90, 90, 90, 0.7);
  }
  .two{
    background-color: rgba(0, 210, 0, 0.7);
  }
  .three{
    background-color: rgba(210, 0, 0, 0.7);
  }
  .four{
    background-color: rgba(0, 0, 210, 0.7);
  }
  .five {
    background-color: rgba(210, 210, 0, 0.7);
  }
  .six{
    background-color: rgba(210, 0, 210, 0.7);
  }
}

可得出如下图

由图1可知，除了数字1,6以外，数字2需要向右旋转90°，数字3需要向下旋转90°，数字4需要向左旋转90°，数字5需要向上旋转90°。向左右上下旋转可以通过rotateX rotateY来实现，rotateX表示沿着x轴旋转，rotateY表示沿着Y轴旋转。因此添加如下css

.two{
    transform: rotateY(90deg);
    ...其他代码;
  }
  .three{
    transform: rotateX(90deg);
    ...其他代码;
  }
  .four{
    transform: rotateY(90deg);
    ...其他代码;
  }
  .five {
    transform: rotateX(90deg);
    ...其他代码;
  }

得出如下图

可以看到数字2到4消失了，这是因为此时我们将其旋转了90°，使用元素2到4和我们的视图垂直，并且我们使用的是二维绘图，消失的元素其实是显示在z轴上，因此在视觉效果上好像消失了。我们可以通过给父元素添加transform-style: preserve-3d来将绘画模式变成3D模式,并且将父元素在三维空间上旋转一定的角度rotate3d(1, 1,1,30deg)来让元素在视觉效果上显示出来。如

.diceContainer{
  margin: 200px;
  ...其他代码;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1,1,30deg);
}

得出如下图

transform-style: preserve-3d

transform-style CSS属性设置一个元素的子元素是位于3D空间中还是在元素所在的平面上进行平铺（即使在3D空间中也将其展开）。

具体而言，该属性有两个可能的值：

flat：子元素在元素所在的平面上进行平铺。即使父元素在3D空间中，子元素也将被视为在2D平面上，并且不会产生任何3D效果。
preserve-3d：子元素在3D空间中进行定位。如果父元素具有3D变换效果，子元素将相对于父元素进行定位，并继承其3D效果。这样可以创建出更复杂的3D场景和动画效果。

rotate3d

rotate3d() CSS 函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。该函数接受4个参数，即x,y,z坐标和旋转的角度。在CSS中，三维空间使用的是右手坐标系（Right-Handed Coordinate System）。右手坐标系是一种常用的三维坐标系统，其中x、y和z轴的方向如下：

x轴：指向右边
y轴：指向上方
z轴：指向观察者（从屏幕指向观察者）

rotate3d(1, 1,1,30deg)图解为

将子元素设置为相对定位，且设置一下他们在z轴上的距离translateZ，即可得到立方体

.diceContainer{
  ...其他代码;
  position: relative;
  .diceItem{
      ...其他代码;
      position: absolute;
  }
  .one{
    transform: translateZ(50px);
    ...其他代码;
  }
  .two{
    transform: rotateY(90deg)  translateZ(50px);
    ...其他代码;
  }
  .three{
    transform: rotateX(90deg)  translateZ(-50px);
    ...其他代码;
  }
  .four{
    transform: rotateY(90deg) translateZ(-50px);
    ...其他代码;
  }
  .five {
    transform: rotateX(90deg) translateZ(50px);
    ...其他代码;
  }
  .six{
    transform: translateZ(-50px);
    ...其他代码;
  }
}

让立方体动起来这一部分比较简单，直接给父元素应用动画即可，下面直接给出代码

@keyframes fullRotation {
  to{
    transform: rotate3d(1,1,1,390deg);
  }
}

.diceContainer{
  animation: fullRotation 1s linear infinite;
  ...其他代码
}

完整代码

  <div class="diceContainer">
    <div class="diceItem one">1</div>
    <div class="diceItem two">2</div>
     <div class="diceItem three">3</div>
    <div class="diceItem four">4</div>
    <div class="diceItem five">5</div>
    <div class="diceItem six">6</div>  
  </div>

.diceContainer{
  animation: fullRotation 1s linear infinite;
  margin: 200px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1,1,30deg);
  position: relative;
  .diceItem{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 60px;
  }
  .one{
    transform: translateZ(50px);
    background-color: rgba(90, 90, 90, 0.7);
  }
  .two{
    transform: rotateY(90deg)  translateZ(50px);
    background-color: rgba(0, 210, 0, 0.7);
  }
  .three{
    transform: rotateX(90deg)  translateZ(-50px);
    background-color: rgba(210, 0, 0, 0.7);
  }
  .four{
    transform: rotateY(90deg) translateZ(-50px);
    background-color: rgba(0, 0, 210, 0.7);
  }
  .five {
    transform: rotateX(90deg) translateZ(50px);
    background-color: rgba(210, 210, 0, 0.7);
  }
  .six{
    transform: translateZ(-50px);
    background-color: rgba(210, 0, 210, 0.7);
  }
}

@keyframes fullRotation {
  to{
    transform: rotate3d(1,1,1,390deg);
  }
}

css之滚动的立方体

效果预览

思路图解

transform-style: preserve-3d

rotate3d

完整代码