Rotating Sphere

HTML
<div class="wrapper"> <div class="sphere main"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div>
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); } }
JAVASCRIPT
Expand for more options Login