JSFiddle - React, Tailwind, and code Playground
by love4all1080
HTML
<div...CSS
.plane {width:100px; height:100px; margin:150px auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-origin: 50px 50px;
-moz-transform-origin:50px 50px;
transform-origin: 50px 50px;
-webkit-animation:spin 8s infinite linear;
-moz-animation:spin 8s infinite linear;
}
.plane ul {padding:0; margin:0; list-style:none; width:100%; height:100%; position:absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.plane ul li {position:absolute; display:block;
border-radius: 50px;
opacity: 0.8;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.plane ul li:nth-child(1) {-moz-transform: rotateY(0deg) translateZ(187px); background:red;}
.plane ul li:nth-child(2) {-moz-transform: rotateY(15deg) translateZ(187px); background:orange;}
.plane ul li:nth-child(3) {-moz-transform: rotateY(30deg) translateZ(187px); background:yellow;}
.plane ul li:nth-child(4) {-moz-transform: rotateY(45deg) translateZ(187px); background:green;}
.plane ul li:nth-child(5) {-moz-transform: rotateY(60deg) translateZ(187px); background:blue;}
.plane ul li:nth-child(6) {-moz-transform: rotateY(75deg) translateZ(187px); background:indigo;}
.plane ul li:nth-child(7) {-moz-transform: rotateY(90deg) translateZ(187px); background:violet;}
.plane ul li:nth-child(8) {-moz-transform: rotateY(105deg) translateZ(187px); background:indigo;}
.plane ul li:nth-child(9) {-moz-transform: rotateY(120deg) translateZ(187px); background:blue;}
.plane ul li:nth-child(10) {-moz-transform: rotateY(135deg) translateZ(187px); background:green;}
.plane ul li:nth-child(11) {-moz-transform: rotateY(150deg) translateZ(187px); background:yellow;}
.plane ul li:nth-child(12) {-moz-transform: rotateY(165deg) translateZ(187px); background:orange;}
.plane ul li:nth-child(13) {-moz-transform: rotateY(180deg) translateZ(187px); background:red;}
.plane ul li:nth-child(14) {-moz-transform: rotateY(195deg)...