JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="stage">
<div class="cubespinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</div>

CSS

*, *:after, *:before  {
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
transition: all 2s;
}
.stage {
padding: 13px;
margin: 3em auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
width: 60px;
height: 60px;
border:2px solid skyBlue;
    border-radius:100%;
    box-shadow: 0 0 0px 2px rgba(255, 255, 255, 0.48),0 0 6px 4px skyBlue,0 0 54px 0px skyBlue;
}

.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 15px 15px;
-moz-animation-name: spincube;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 12s;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 15px 15px;
}
.cubespinner div {
position: absolute;
width: 30px;
height: 30px;
border: 1px solid #CCC;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 18px;
font-size: 12px;
}

.cubespinner .face1 {
-webkit-transform: translateZ(15px);
-moz-transform: translateZ(15px);
}
.cubespinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(15px);
-moz-transform: rotateY(90deg) translateZ(15px);
}
.cubespinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(15px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(15px);
}

.cubespinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(15px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(15px);
}
.cubespinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(15px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(15px);
}
.cubespinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(15px);
-moz-transform: rotateX(-90deg) translateZ(15px);
}

 ...