پیشنمایش زنده
کد HTML
<div class="v3-cube-loader">
<div style="--i:0;" class="v3-cube"></div>
<div style="--i:1;" class="v3-cube"></div>
<div style="--i:2;" class="v3-cube"></div>
<div style="--i:3;" class="v3-cube"></div>
<div style="--i:4;" class="v3-cube"></div>
<div style="--i:5;" class="v3-cube"></div>
<div style="--i:6;" class="v3-cube"></div>
<div style="--i:7;" class="v3-cube"></div>
<div style="--i:8;" class="v3-cube"></div>
<div style="--i:9;" class="v3-cube"></div>
</div>
کد CSS
.v3-cube-loader {
position: relative;
width: 220px;
height: 220px;
perspective: 1200px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
background: transparent;
}
.v3-cube {
position: absolute;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #007cf0, #00dfd8);
border-radius: 6px;
transform-style: preserve-3d;
animation: cube-float-3d 3.5s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.2s);
opacity: 0.85;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
@keyframes cube-float-3d {
0% {
transform: translate3d(
calc((var(--i) - 5) * 20px),
calc((var(--i) - 5) * 12px),
0
)
rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
}
50% {
transform: translate3d(
calc((var(--i) - 5) * 20px),
calc((var(--i) - 5) * 12px),
50px
)
rotateX(180deg) rotateY(180deg) rotateZ(90deg) scale(1.25);
}
100% {
transform: translate3d(
calc((var(--i) - 5) * 20px),
calc((var(--i) - 5) * 12px),
0
)
rotateX(360deg) rotateY(360deg) rotateZ(180deg) scale(1);
}
}