monika14-github/css-3d-sphere

CSS-3D-Sphere

....html....

<title>repl.it</title> <script src="script.js"></script>

....css..... html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: rgb(2, 108, 134); } .main-wrapper { display: flex; position: absolute; transform-style: preserve-3d; perspective: 400px; left: 0; top: 0; bottom: 0; right: 0; align-items: center; justify-content: center; } .sphere-wrapper { transform-style: preserve-3d; width: 300px; height: 300px; position: relative; -webkit-animation: rotate3d 10s linear infinite; animation: rotate3d 10s linear infinite; } .plane { position: absolute; transform-style: preserve-3d; top: 0; right: 0; bottom: 0; left: 0; } .spoke { transform-origin: 0 0; transform-style: preserve-3d; position: absolute; left: 50%; top: 50%; height: 150px; width: 0px; } .dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; left: -3px; top: 100%; transform: rotateX(90deg); } .spoke.spoke-1 { transform: rotateZ(10deg); } .spoke.spoke-2 { transform: rotateZ(20deg); } .spoke.spoke-3 { transform: rotateZ(30deg); } .spoke.spoke-4 { transform: rotateZ(40deg); } .spoke.spoke-5 { transform: rotateZ(50deg); } .spoke.spoke-6 { transform: rotateZ(60deg); } .spoke.spoke-7 { transform: rotateZ(70deg); } .spoke.spoke-8 { transform: rotateZ(80deg); } .spoke.spoke-9 { transform: rotateZ(90deg); } .spoke.spoke-10 { transform: rotateZ(100deg); } .spoke.spoke-11 { transform: rotateZ(110deg); } .spoke.spoke-12 { transform: rotateZ(120deg); } .spoke.spoke-13 { transform: rotateZ(130deg); } .spoke.spoke-14 { transform: rotateZ(140deg); } .spoke.spoke-15 { transform: rotateZ(150deg); } .spoke.spoke-16 { transform: rotateZ(160deg); } .spoke.spoke-17 { transform: rotateZ(170deg); } .spoke.spoke-18 { transform: rotateZ(180deg); } .spoke.spoke-19 { transform: rotateZ(190deg); } .spoke.spoke-20 { transform: rotateZ(200deg); } .spoke.spoke-21 { transform: rotateZ(210deg); } .spoke.spoke-22 { transform: rotateZ(220deg); } .spoke.spoke-23 { transform: rotateZ(230deg); } .spoke.spoke-24 { transform: rotateZ(240deg); } .spoke.spoke-25 { transform: rotateZ(250deg); } .spoke.spoke-26 { transform: rotateZ(260deg); } .spoke.spoke-27 { transform: rotateZ(270deg); } .spoke.spoke-28 { transform: rotateZ(280deg); } .spoke.spoke-29 { transform: rotateZ(290deg); } .spoke.spoke-30 { transform: rotateZ(300deg); } .spoke.spoke-31 { transform: rotateZ(310deg); } .spoke.spoke-32 { transform: rotateZ(320deg); } .spoke.spoke-33 { transform: rotateZ(330deg); } .spoke.spoke-34 { transform: rotateZ(340deg); } .spoke.spoke-35 { transform: rotateZ(350deg); } .plane.plane-1 { transform: rotateY(15deg); } .plane.plane-2 { transform: rotateY(30deg); } .plane.plane-3 { transform: rotateY(45deg); } .plane.plane-4 { transform: rotateY(60deg); } .plane.plane-5 { transform: rotateY(75deg); } .plane.plane-6 { transform: rotateY(90deg); } .plane.plane-7 { transform: rotateY(105deg); } .plane.plane-8 { transform: rotateY(120deg); } .plane.plane-9 { transform: rotateY(135deg); } .plane.plane-10 { transform: rotateY(150deg); } .plane.plane-11 { transform: rotateY(165deg); } .spoke-0 .dot, .spoke-36 .dot { -webkit-animation: pulsate 0.5s infinite 0s alternate both; animation: pulsate 0.5s infinite 0s alternate both; background-color: #e60da4; } .spoke-1 .dot, .spoke-35 .dot { -webkit-animation: pulsate 0.5s infinite 0.05555556s alternate both; animation: pulsate 0.5s infinite 0.05555556s alternate both; background-color: #c50d9d; } .spoke-2 .dot, .spoke-34 .dot { -webkit-animation: pulsate 0.5s infinite 0.11111111s alternate both; animation: pulsate 0.5s infinite 0.11111111s alternate both; background-color: #f76ece; } .spoke-3 .dot, .spoke-33 .dot { -webkit-animation: pulsate 0.5s infinite 0.16666667s alternate both; animation: pulsate 0.5s infinite 0.16666667s alternate both; background-color: #fc07aa; } .spoke-4 .dot, .spoke-32 .dot { -webkit-animation: pulsate 0.5s infinite 0.22222222s alternate both; animation: pulsate 0.5s infinite 0.22222222s alternate both; background-color: #ff55e3; } .spoke-5 .dot, .spoke-31 .dot { -webkit-animation: pulsate 0.5s infinite 0.27777778s alternate both; animation: pulsate 0.5s infinite 0.27777778s alternate both; background-color: #d7ff55; } .spoke-6 .dot, .spoke-30 .dot { -webkit-animation: pulsate 0.5s infinite 0.33333333s alternate both; animation: pulsate 0.5s infinite 0.33333333s alternate both; background-color: #bbff55; } .spoke-7 .dot, .spoke-29 .dot { -webkit-animation: pulsate 0.5s infinite 0.38888889s alternate both; animation: pulsate 0.5s infinite 0.38888889s alternate both; background-color: #9fff55; } .spoke-8 .dot, .spoke-28 .dot { -webkit-animation: pulsate 0.5s infinite 0.44444444s alternate both; animation: pulsate 0.5s infinite 0.44444444s alternate both; background-color: #82ff55; } .spoke-9 .dot, .spoke-27 .dot { -webkit-animation: pulsate 0.5s infinite 0.5s alternate both; animation: pulsate 0.5s infinite 0.5s alternate both; background-color: #66ff55; } .spoke-10 .dot, .spoke-26 .dot { -webkit-animation: pulsate 0.5s infinite 0.55555556s alternate both; animation: pulsate 0.5s infinite 0.55555556s alternate both; background-color: #55ff60; } .spoke-11 .dot, .spoke-25 .dot { -webkit-animation: pulsate 0.5s infinite 0.61111111s alternate both; animation: pulsate 0.5s infinite 0.61111111s alternate both; background-color: #55ff7d; } .spoke-12 .dot, .spoke-24 .dot { -webkit-animation: pulsate 0.5s infinite 0.66666667s alternate both; animation: pulsate 0.5s infinite 0.66666667s alternate both; background-color: #55ff99; } .spoke-13 .dot, .spoke-23 .dot { -webkit-animation: pulsate 0.5s infinite 0.72222222s alternate both; animation: pulsate 0.5s infinite 0.72222222s alternate both; background-color: #55ffb5; } .spoke-14 .dot, .spoke-22 .dot { -webkit-animation: pulsate 0.5s infinite 0.77777778s alternate both; animation: pulsate 0.5s infinite 0.77777778s alternate both; background-color: #f30909; } .spoke-15 .dot, .spoke-21 .dot { -webkit-animation: pulsate 0.5s infinite 0.83333333s alternate both; animation: pulsate 0.5s infinite 0.83333333s alternate both; background-color: #c00d16; } .spoke-16 .dot, .spoke-20 .dot { -webkit-animation: pulsate 0.5s infinite 0.88888889s alternate both; animation: pulsate 0.5s infinite 0.88888889s alternate both; background-color: #d30e29; } .spoke-17 .dot, .spoke-19 .dot { -webkit-animation: pulsate 0.5s infinite 0.94444444s alternate both; animation: pulsate 0.5s infinite 0.94444444s alternate both; background-color: #c24141; } .spoke-18 .dot, .spoke-18 .dot { -webkit-animation: pulsate 0.5s infinite 1s alternate both; animation: pulsate 0.5s infinite 1s alternate both; background-color: #df0724; } @-webkit-keyframes rotate3d { 0% { transform: rotate3d(1, 1, 1, 0deg); } 25% { transform: rotate3d(1, 1, 1, 90deg); } 50% { transform: rotate3d(1, 1, 1, 180deg); } 75% { transform: rotate3d(1, 1, 1, 270deg); } 100% { transform: rotate3d(1, 1, 1, 360deg); } } @keyframes rotate3d { 0% { transform: rotate3d(1, 1, 1, 0deg); } 25% { transform: rotate3d(1, 1, 1, 90deg); } 50% { transform: rotate3d(1, 1, 1, 180deg); } 75% { transform: rotate3d(1, 1, 1, 270deg); } 100% { transform: rotate3d(1, 1, 1, 360deg); } } @-webkit-keyframes pulsate { 0% { transform: rotateX(90deg) scale(0.3) translateZ(20px); } 100% { transform: rotateX(90deg) scale(1) translateZ(0px); } } @keyframes pulsate { 0% { transform: rotateX(90deg) scale(0.3) translateZ(20px); } 100% { transform: rotateX(90deg) scale(1) translateZ(0px); } } .animista-badge { font: normal 15px/1.5 sans-serif; position: absolute; right: 10px; bottom: 10px; color: rgba(255, 255, 255, 0.8); padding: 0.5em 1em; } a { color: #ff6060; text-decoration: none; } a:hover { text-decoration: underline; }