纯 CSS3 3D 旋转立方体动画特效，该 3D 立方体使用 CSS3 perspective 制作，可以在水平方向、垂直方向和平面视角方向旋转，使用 CSS 来制作立方体动画，效果非常好。下面来看看制作方法。
HTML 结构
立方体结构中，使用一个 wrapper div 来包裹立方体。在里面使用 6 个 div 来制作立方体的 6 个面。
<div class="wrap"> <div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="top">top</div> <div class="bottom">bottom</div> <div class="left">left</div> <div class="right">right</div> </div></div>
分别为立方体的六个面，使用 CSS 来将立方体的 6 个面放置到正确的位置上
CSS 样式
设置景深（perspective）：观察距离，更好的体现立体性
和变换原点（perspective-origin）：变换属性的原点
.wrap {perspective: 800px; perspective-origin: 50% 100px;}
给包含立方体 6 个面的立方体的容器.cube 提供样式：
.cube {/*添加相对定位*/position: relative; width: 200px; /*形成3d空间*/transform-style: preserve-3d;}
给立方体容器 200 像素的宽度，并设置为相对定位，这样在它里面的立方体的 6 个面可以设置为绝对定位。preserve-3d 属性确保所有 6 个面都处于 3D 立体状态。给6个面设置统一样式：
.cube div {/*绝对定位*/position: absolute; width: 200px;height: 200px;}
给立方体6 个面制作css变形效果，以使它们组装为一个立方体。
.back {transform: translateZ(-100px) rotateY(180deg);}.right {transform: rotateY(-270deg) translateX(100px); transform-origin: top right;}.left {transform: rotateY(270deg) translateX(-100px); transform-origin: center left;}.top {transform: rotateX(-90deg) translateY(-100px); transform-origin: top center;}.bottom {transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;}.front {transform: translateZ(100px);}
rotate 的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。rotateX绕x轴旋转，rotateY绕y轴旋转
而translate的值使元素在指定容器移动。translateX在x轴移动，translateY在y轴移动，translateZ在Z轴上移动。
使6个面形成立方体
垂直旋转立方体
/*设置关键帧*/@keyframes spin-vertical {from {transform: rotateX(0); } to {transform: rotateX(-360deg); }} .cube-wrap.vertical .cube {margin: 0 auto; transform-origin: 0 100px;/*使用关键帧 调整动画为匀速 一直运动*/ animation: spin-vertical 5s infinite linear;}.cube-wrap.vertical .top {transform: rotateX(-270deg) translateY(-100px);} .cube-wrap.vertical .back {transform: translateZ(-100px) rotateX(180deg;}.cube-wrap.vertical .bottom {transform: rotateX(-90deg) translateY(100px);}
这样就完成了立方体的旋转特效。
