پیشنمایش زنده
کد HTML
<div class="scene">
<div class="spinner">
<div class="face front">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8C17 9.64 16.21 11.09 15 12C14.16 12.63 12 14 12 17"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M12 21V21.01"
></path>
</svg>
</div>
<div class="face back">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8C17 9.64 16.21 11.09 15 12C14.16 12.63 12 14 12 17"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M12 21V21.01"
></path>
</svg>
</div>
<div class="face left">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8C17 9.64 16.21 11.09 15 12C14.16 12.63 12 14 12 17"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M12 21V21.01"
></path>
</svg>
</div>
<div class="face right">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8C17 9.64 16.21 11.09 15 12C14.16 12.63 12 14 12 17"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M12 21V21.01"
></path>
</svg>
</div>
<div class="face top">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8C17 9.64 16.21 11.09 15 12C14.16 12.63 12 14 12 17"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M12 21V21.01"
></path>
</svg>
</div>
<div class="face bottom">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M7 8C7 5.24 9.24 3 12 3C14.76 3 17 5.24 17 8C17 9.64 16.21 11.09 15 12C14.16 12.63 12 14 12 17"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#00FF0D"
d="M12 21V21.01"
></path>
</svg>
</div>
</div>
</div>
کد CSS
.scene {
perspective: 800px;
--bg-body: #000;
--face-bg: rgba(22, 27, 23, 0.9);
--border-color: rgba(1, 206, 8, 0.9);
--box-shadow-color: rgba(8, 254, 0, 0.6);
--filter-shadow-color: rgba(26, 255, 0, 0.5);
--svg-shadow-color: rgba(17, 255, 0, 0.4);
}
.spinner {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform-origin: center;
animation: rotateCube 6s infinite ease-in-out;
}
.face {
position: absolute;
width: 100px;
height: 100px;
background: var(--face-bg);
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--border-color);
box-shadow: 0 0 12px var(--box-shadow-color);
filter: drop-shadow(0px 0px 6px var(--filter-shadow-color));
}
.face svg {
width: 80px;
height: 80px;
opacity: 0.9;
filter: drop-shadow(0px 0px 12px var(--svg-shadow-color));
}
.front {
transform: translateZ(50px);
}
.back {
transform: rotateY(180deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotateCube {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1);
}
50% {
transform: rotateX(180deg) rotateY(180deg) scale(1.05);
}
100% {
transform: rotateX(360deg) rotateY(360deg) scale(1);
}
}