效果演示
HTML和CSS实现一个简单的3D立方体加载动画的相册。它使用了HTML来构建立方体的结构，并通过CSS来添加样式和动画效果。
HTML
<div class="loader3d"><div class="cube"><div class="face"><img src="../../static/test.jpg" alt=""></div><div class="face"><img src="../../static/test.jpg" alt=""></div><div class="face"><img src="../../static/test.jpg" alt=""></div><div class="face"><img src="../../static/common_bot.png" alt=""></div><div class="face"><img src="../../static/common_bot.png" alt=""></div><div class="face"><img src="../../static/common_bot.png" alt=""></div></div>
</div>
- loader3d：这是外层容器，用于包裹整个立方体。
- cube：这是立方体的主体，包含六个面（.face）。
- face：每个.face代表立方体的一个面。这里一共有六个面，用自己的图片即可。
CSS
.loader3d {perspective: 600px;width: 100px;height: 100px;
}.cube {width: 100%;height: 100%;transform-style: preserve-3d;animation: rotate 4s linear infinite;
}.face {position: absolute;width: 100%;height: 100%;background: linear-gradient(45deg, #3498db, #e74c3c);opacity: 0.8;border: 0.5px solid #fff;border-radius: 25%;text-align: center;line-height: 100px;
}.face img {width: 100%;height: 100%;border: 0.5px solid #fff;border-radius: 25%;
}.face:nth-child(1) {transform: rotateX(90deg) translateZ(50px);
}.face:nth-child(2) {transform: rotateX(-90deg) translateZ(50px);
}.face:nth-child(3) {transform: translateZ(50px);
}.face:nth-child(4) {transform: rotateY(90deg) translateZ(50px);
}.face:nth-child(5) {transform: rotateY(-90deg) translateZ(50px);
}.face:nth-child(6) {transform: rotateY(180deg) translateZ(50px);
}@keyframes rotate {0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}
}
- loader3d：这是外层容器的样式，设置了透视效果（perspective），宽度和高度。
- cube：这是立方体的样式，设置了宽度、高度、3D变换样式（transform-style），以及一个无限循环的旋转动画（rotate）。
- face：这是立方体每个面的通用样式，设置了位置、大小、背景渐变色、透明度、边框、边框圆角和文本对齐方式。
- face img：这是每个面上图片的样式，设置了图片的宽度、高度、边框和圆角。
- face的nth-child()选择器：这是为每个面设置不同的3D旋转和位置。例如，.face:nth-child(1)将第一个面旋转90度并沿Z轴移动50px。
- @keyframes rotate：这是一个关键帧动画，定义了立方体的旋转效果。从0%到100%，立方体的X轴和Y轴旋转角度从0度增加到360度。
- 立方体会无限循环地沿着X轴和Y轴旋转，这是通过@keyframes rotate定义的动画实现的。
- 每个面都有自己的旋转和位置，使得立方体看起来在空间中旋转。
