3D 立方体连轴翻转，立体感最强的加载动画
← 返回 加载 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .fcb{height:150px;perspective:120px;display:flex;align-items:center;justify-content:center}
.fx .fcb .cube{width:44px;height:44px;transform-style:preserve-3d;animation:kfx-fold 3s ease-in-out infinite;position:relative}
.fx .fcb .f{position:absolute;inset:0;background:rgba(74,158,255,.75)}
.fx .fcb .f2{transform:rotateY(90deg) translateZ(22px);background:rgba(247,120,186,.75)}
.fx .fcb .f3{transform:rotateY(180deg) translateZ(22px);background:rgba(87,171,90,.75)}
.fx .fcb .f4{transform:rotateY(-90deg) translateZ(22px);background:rgba(167,113,247,.75)}
@keyframes kfx-fold{0%,20%{transform:rotateY(0)}60%,100%{transform:rotateY(360deg)}}<div class="fx">
<div class="fcb"><div class="cube"><div class="f f1"></div><div class="f f2"></div><div class="f f3"></div><div class="f f4"></div></div></div>
</div>