JSFiddle - React, Tailwind, and code Playground

by brunogc

HTML

<div id="blo" style="display:block;width:100px;height:100px;background-color:red" class="flip animated loop">
</div>


<div id="blco" style="display:block;width:300px;height:300px;background-color:blue" class="pageLeft animated">
</div>

CSS

@-webkit-keyframes
flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
    };
}

@-moz-keyframes
flip {
    0% {
        -moz-transform: perspective(400px) rotateY(0);
        -moz-animation-timing-function: ease-out;
    }

    40% {
        -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -moz-animation-timing-function: ease-out;
    }

    50% {
        -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -moz-animation-timing-function: ease-in;
    }

    80% {
        -moz-transform: perspective(400px) rotateY(360deg) scale(.95);
        -moz-animation-timing-function: ease-in;
    }

    100% {
        -moz-transform: perspective(400px) scale(1);
        -moz-animation-timing-function: ease-in;
    };
}

@-ms-keyframes
flip {
    0% {
        -ms-transform: perspective(400px) rotateY(0);
        -ms-animation-timing-function: ease-out;
    }

    40% {
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -ms-animation-timing-function: ease-out;
    }

    50% {
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -ms-animation-timing-function: ease-in;
    }

    80% {
        -ms-transform: perspective(400px) rotateY(360deg) scale(.95);
        -ms-animation-timing-function:...