CSS
html, body {
background: #222;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 400;
}
.sphere {
width: 140px;
height: 140px;
transform-style: preserve-3d;
}
.sphere.main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotateX(60deg) rotateZ(-30deg);
animation: rotate 5s infinite linear;
}
.sphere.main .circle {
width: 140px;
height: 140px;
position: absolute;
transform-style: preserve-3d;
border-radius: 100%;
box-sizing: border-box;
box-shadow: 0 0 40px #2ecc71,
inset 0 0 40px #2ecc71;
}
.sphere.main .circle::before {
transform: translateZ(-90px);
}
.sphere.main .circle::after {
transform: translateZ(90px);
}
.sphere.main .circle:nth-child(1) {
transform: rotateZ(72deg) rotateX(63.435deg);
}
.sphere.main .circle:nth-child(2) {
transform: rotateZ(144deg) rotateX(63.435deg);
}
.sphere.main .circle:nth-child(3) {
transform: rotateZ(216deg) rotateX(63.435deg);
}
.sphere.main .circle:nth-child(4) {
transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
transform: rotateZ(360deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(6) {
transform: rotateZ(420deg) rotateX(63.435deg);
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
3 Responses