spinner clip-path: polygon css

Опубликовано: 31 Май 2026
на канале: Code - Bard

div class="spinner"
div1/div
div2/div
div3/div
div4/div
div5/div
div6/div
/div

style
.spinner {
width: 55.8px;
height: 55.8px;
animation: spinner-y0fdc1 2s infinite ease;
transform-style: preserve-3d; }

.spinner div {
background-color: rgba(71,75,255,0.2);
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
width: 100%;
border: 2.7px solid #474bff;
}

.spinner div:nth-of-type(1) {
background: gold;
transform: translateZ(-22.4px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
background: red;
transform: rotateY(-270deg) translateX(50%);
transform-origin: top right;
}

.spinner div:nth-of-type(3) {
background: green;
transform: rotateY(270deg) translateX(-50%);
transform-origin: center left;
}

.spinner div:nth-of-type(4) {
background: pink;
transform: rotateX(90deg) translateY(-50%);
transform-origin: top center;
}

.spinner div:nth-of-type(5) {
background: blue;
transform: rotateX(-90deg) translateY(50%);
transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
background: fuchsia;
transform: translateZ(22.4px);
}

@keyframes spinner-y0fdc1 {
0% {
transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
}

50% {
transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
}

100% {
transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
}
}
/style