JSFiddle - React, Tailwind, and code Playground
HTML
<div id="kontener">
<div id="rzecz"></div>
</div>
CSS
body {
margin: 0;
overflow: hidden;
}
#kontener, #kontener * {
position: absolute;
}
#kontener {
width: 700px;
height: 430px;
}
#rzecz {
width: 360px;
height: 360px;
left: 35px;
top: 35px;
perspective: 400px;
-webkit-animation: obrot 2s linear infinite;
animation: obrot 2s linear infinite;
}
#rzecz > div {
width: 40px;
height: 40px;
left: 170px;
top: 170px;
transform-style: preserve-3d;
}
#rzecz > div > div {
width: 40px;
height: 40px;
transform-style: preserve-3d;
}
#rzecz > div > div > div {
width: 10px;
height: 40px;
}
#rzecz > div > div > div:nth-child(1) {
transform: translateZ(400px);
}
#rzecz > div > div > div:nth-child(2) {
transform: rotateX(180deg) translateZ(20px);
}
#rzecz > div {
background-color: pink;
}
#rzecz > div > div > div:nth-child(1) {
background-color: blue;
}
#rzecz > div > div > div:nth-child(2) {
background-color: green;
}
@-webkit-keyframes obrot {
from {
transform: rotate(5deg);
}
to {
transform: rotate(700deg);
}
}
@-webkit-keyframes wewobrot {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(400deg);
}
}
@keyframes obrot {
from {
transform: rotate(5deg);
}
to {
transform: rotate(365deg);
}
}
@keyframes wewobrot {
from {
transform: rotateX(40deg);
}
to {
transform: rotateX(400deg);
}
}
JavaScript
var conat = document.getElementById("rzecz");
for (var i = 0; i < 16; ++i) {
var d = document.createElement("div");
d.style.transform = "rotate(" + 22.5 * i + "deg) translateY(170px)";
conat.appendChild(d);
var ind = document.createElement("div");
d.appendChild(ind);
ind.style.WebkitAnimation = "wewobrot 1s -" + i / 16 + "s linear infinite";
ind.style.animation = "wewobrot 1s -" + i / 16 + "s linear infinite";
var indd = [];
indd[0] = document.createElement("div");
indd[1] = document.createElement("div");
for (val of indd) {
ind.appendChild(val);
}
}