JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div class="container">
    <div class="cube">
        <span class="front">TEXT</span>
        <span class="back">TEXT</span>
        <span class="right">TEXT</span>
        <span class="left">TEXT</span>
        <span class="top"></span>
        <span class="bottom"></span>        
    </div>
</div>

CSS

body {
    padding: 40px;
    background: #efefef;
}
.container {
    -webkit-perspective: 1000;
    position: relative;
    width: 200px;
    height: 200px;
    background: rgba(0,0,255,0.2);
}
.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;    
}
.cube:hover {
    -webkit-animation: example 3s;
}
.cube span {
    /*background: rgba(255,0,0,0.3);*/
    background: -webkit-linear-gradient(top, #cc2828 44%,#ffffff 45%); /* Chrome10+,Safari5.1+ */
    width: 196px;
    height: 136px;
    position: absolute;
    display: block;
    /*border: 2px solid black;*/
    text-align: center;
    font-size: 4em;
    padding-top: 60px;
    opacity: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.front {
    -webkit-transform: rotateY(0deg) translateZ(100px);
    opacity: 1 !important;
}
.cube:hover .front { -webkit-animation: front 3s; }
.back {
    -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(100px);    
}
.cube:hover .back {-webkit-animation: back 3s;}
.right {
    -webkit-transform: rotateY(90deg) translateZ(100px);    
}
.cube:hover .right {-webkit-animation: right 3s;}
.left {
    -webkit-transform: rotateY(-90deg) translateZ(100px);
}
.cube:hover .left {-webkit-animation: left 3s;}
.top {
    -webkit-transform: rotateX(90deg) translateZ(100px);
}
.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
}


@-webkit-keyframes example {
    0% { -webkit-transform: rotateY(0deg); }
    16% { -webkit-transform: rotateY(90deg); }
    32% { -webkit-transform: rotateY(180deg); }
    48% { -webkit-transform: rotateY(90deg); }
    64% { -webkit-transform: rotateY(0deg); }
    80% { -webkit-transform: rotateY(-90deg); }
    100% { -webkit-transform: rotateY(0deg); }
}
@-webkit-keyframes front {
    0% { opacity: 1; }
    16% { opacity: 0; }
    32% { opacity: 0; }
    48% { opacity: 0; }
    64% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 1;...