JSFiddle - React, Tailwind, and code Playground

by teneff

HTML

<div id="container">
    <a id="rotate" href="#">
        <span class="back face">back contents</span>
        <span class="front face">front contents</span>
    </a>   
</div>

CSS

#container {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}
#rotate{
    display: block;
    width: 200px;
    height: 200px;
    border: 1px solid red;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    position: relative;
}
#container:hover #rotate {
    -webkit-transform: rotatey(-180deg);
    -moz-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
#rotate .face {
    display: block;
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background: #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
#rotate .front {
}
#rotate .back {
    -webkit-transform: rotatey(-180deg);
    -moz-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}