JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="perspective">
<div id="container">
<div id="focus">
    <div id="c">
</div>
</div>
</div>

CSS

body {
    background:#666;
    overflow:hidden; margin:0;
    min-height:300px;
}
div {
    position:absolute; margin:0;
    -webkit-transform-style:preserve-3d;
}
#perspective {
    height:100%; width:100%;
    -webkit-perspective:300;
}
#container {
    height:100%; width:100%;
    -webkit-transform: rotateY(90deg) translateX(50%) rotateY(-90deg);
}
#focus {
    top:00%; right:00%; bottom:00%; left:00%;
    -webkit-animation:spin 6s  linear;
}
@-webkit-keyframes spin {
    from {-webkit-transform:rotatey(0deg) rotateX(0deg);}
    to   {-webkit-transform:rotatey(-360deg) rotateX(360deg);}
    }
#c {
    top:-50%; right:00%; bottom:50%; left:00%;
    background:rgba(0,0,255,.70); outline:1px solid #00F;
    -webkit-animation:c 20s  linear;
}
@-webkit-keyframes c {
    from {-webkit-transform:rotatex(0deg) translateY(-50%);}
    10%  {-webkit-transform:rotatex(0deg) translateY(-50%);}
    20%  {-webkit-transform:rotatex(-40deg) translateY(-50%);}
    30%  {-webkit-transform:rotatex(-40deg) translateY(-50%);}
    40%  {-webkit-transform:rotatex(0deg) translateY(-50%);}
    50%  {-webkit-transform:rotatex(-40deg) translateY(-50%);}
    60%  {-webkit-transform:rotatex(-40deg) translateY(-50%);}
    70%  {-webkit-transform:rotatex(0deg) translateY(-50%);}
    80%  {-webkit-transform:rotatex(0deg) translateY(-50%);}
    90%  {-webkit-transform:rotatex(0deg) translateY(-50%);}
    to   {-webkit-transform:rotatex(0deg) translateY(-50%);}
    }