JSFiddle - React, Tailwind, and code Playground
HTML
<div id="C3D"><div id="box"><div></div></div></div>
CSS
body{background-color:black;}
#C3D{
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate3d(-50%,-50%,0);
width:400px;
height:400px;
-webkit-transform-style:preserve-3d;
-webkit-perspective:1500px;
border:4px dotted hsla(200,100%,50%,.3);
border-radius:50%;
/*-webkit-animation:rotate2 60s infinite linear;*/
background-image:-webkit-radial-gradient(circle,hsla(200,100%,50%,.5) 0px,hsla(200,100%,50%,0) 20px);
opacity:1;
-webkit-animation:fadeIn 2000ms linear,rotate2 60s infinite linear;
}
#box,#box>div,#box:after,#box:before,#box>div:after,#box>div:before{
-webkit-transform-style:preserve-3d;
/*-webkit-backface-visibility:hidden;*/
-webkit-transform-origin:100% 100%;
box-shadow:0 0 16px 0 hsla(200,100%,50%,1),inset 0 0 16px 0 hsla(200,100%,50%,1);
position:absolute;
display:block;
width:400px;
height:400px;
border-radius:50%;
}
#box{
-webkit-transform-origin:50% 50% -200px;
opacity:1;
-webkit-animation:rotate 10000ms infinite linear;
/*-webkit-animation:fadeIn 2000ms linear;*/
-webkit-transition:-webkit-transform 700ms ease-out;
}
#box,#box>div{
/*background-image:url(http://placekitten.com/500/500);*/
}
#box:before,#box>div:before,#box:after,#box>div:after{
content:'';/*url(cchttp://placekitten.com/50/50);*/
/*background-image:url(http://placekitten.com/500/500);*/
}
#box{
-webkit-transform:translate3d(0,0,200px) rotateY(0deg) scale(1);
}
#box>div{
-webkit-transform:translate3d(0,0,-400px) rotateY(180deg) rotateZ(90deg);
}
#box:before,#box>div:before{
-webkit-transform:translate3d(-400px,0,0) rotateY(-90deg);
}
#box:after,#box>div:after{
-webkit-transform:translate3d(0,0,-400px) rotateY(90deg);
}
@-webkit-keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadeOut{
0%{opacity:1}
100%{opacity:0}
}
@-webkit-keyframes rotate{
0%{-webkit-transform:translate3d(0,0,200px) rotate3d(0,0,0,360deg) scale3d(.5,.5,.5);}
100%{-webkit-transform:translate3d(0,0,200px) rotate3d(1,2,3,360deg)...