纯CSS的多个立方体嵌套3D旋转

一款纯CSS的多个立方体嵌套3D旋转特效，每个立方体都有一个着色面，这样能很明显看清立方体旋转的不同角度，3个立方体的大小和颜色可以自由调整。

分类：css3 > transform 难易：初级

查看演示下载资源下载积分： 8 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需设置好页面元素的样式，代码如下：

* {
  margin:0; padding:0;
  box-sizing:border-box;
}
html, body {
  background:var(--bg);
}
:root{
  --bg:rgb(254, 251, 249);
  --maincube:400px;
  --smallcube:200px;
  --smallercube:100px;
}
#main-wrapper {
  position:relative;
  margin:9em auto;
  width:var(--maincube); height:var(--maincube);
  perspective:1000px;
}

.cube {
  position:absolute;
  top:calc(50% - var(--cubesize) / 2);
  right:calc(50% - var(--cubesize) / 2);
  width:var(--cubesize); height:var(--cubesize);
  transform-style:preserve-3d;
  transform: translateZ(calc(-1 * var(--cubesize) / 2));
  animation:var(--anim) 10s linear infinite alternate;
}
#smallcube {
  animation:subcuberotation 10s linear infinite alternate-reverse;
}
.cube .front { 
  background:rgba(66, 153, 205,.8) !important;
}
.cube > div:not(.cube) {
  position:absolute;
  background:rgba(241, 248, 244, 0.49);
  width:var(--cubesize); height:var(--cubesize);
  border:1px solid rgb(66, 153, 205);
}
.cube > .front  { transform:rotateY(   0deg ) translateZ(calc(var(--cubesize) / 2)); }
.cube > .back   { transform:rotateX( 180deg ) translateZ(calc(var(--cubesize) / 2)); }
.cube > .right  { transform:rotateY(  90deg ) translateZ(calc(var(--cubesize) / 2)); }
.cube > .left   { transform:rotateY( -90deg ) translateZ(calc(var(--cubesize) / 2)); }
.cube > .top    { transform:rotateX(  90deg ) translateZ(calc(var(--cubesize) / 2)); }
.cube > .bottom { transform:rotateX( -90deg ) translateZ(calc(var(--cubesize) / 2)); }

@keyframes maincuberotation {
  0%   { transform:translateZ(calc(-1 * var(--cubesize) / 2)) rotateY(    0deg ); }
  20%  { transform:translateZ(calc(-1 * var(--cubesize) / 2)) rotateX( -180deg ); }
  40%  { transform:translateZ(calc(-1 * var(--cubesize) / 2)) rotateY(  -90deg ); }
  60%  { transform:translateZ(calc(-1 * var(--cubesize) / 2)) rotateY(   90deg ); }
  80%  { transform:translateZ(calc(-1 * var(--cubesize) / 2)) rotateX(  -90deg ); }
  100% { transform:translateZ(calc(-1 * var(--cubesize) / 2)) rotateX(   90deg ); }
}
@keyframes subcuberotation {
  0%   { transform:rotateY(    0deg ); }
  20%  { transform:rotateX( -180deg ); }
  40%  { transform:rotateY(  -90deg ); }
  60%  { transform:rotateY(   90deg ); }
  80%  { transform:rotateX(  -90deg ); }
  100% { transform:rotateX(   90deg ); }
}

页面的body部分，用来多个div容器来显示不同的立方体，代码如下：

<div id="main-wrapper">
  <div id="maincube" class="cube" style="--cubesize:400px;--anim:maincuberotation;">
    <div class="front"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>

    <div id="smallcube" class="cube" style="--cubesize:200px;--anim:subcuberotation;">
      <div class="front"></div>
      <div class="back"></div>
      <div class="right"></div>
      <div class="left"></div>
      <div class="top"></div>
      <div class="bottom"></div>

      <div id="smallercube" class="cube" style="--cubesize:100px;">
        <div class="front"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</div>