JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="stage" style="width: 100px; height: 100px; border: 1px solid #f00;">
<div class="spinner" style="background: black;width: 100px; height: 100px;"></div>
<div class="spinner-back" style="background: red;width: 100px; height: 100px;"></div>
</div>

CSS

#stage {
    margin: 1em auto;
    perspective: 500px;
    -moz-perspective: 500px;
    -webkit-perspective: 500px;
    -o-perspective: 500px;
    -ms-perspective: 500px;
}

.spinner {
    
    transform-style: preserve-3d;
    transform-origin: center left;
    transform: rotateY(0deg);
    transition: transform 3s ease-in-out;
    
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: center left;
    -moz-transform: rotateY(0deg);
    -moz-transition: -moz-transform 3s ease-in-out;
    
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: center left;
    -webkit-transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 3s ease-in-out;
    
    -o-transform-style: preserve-3d;
    -o-transform-origin: center left;
    -o-transform: rotateY(0deg);
    -o-transition: -o-transform 3s ease-in-out;
    
    -ms-transform-style: preserve-3d;
    -ms-transform-origin: center left;
    -ms-transform: rotateY(0deg);
    -ms-transition: -ms-transform 3s ease-in-out;
}

#stage.open .spinner {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

JavaScript

$('#stage').click(function() { $(this).toggleClass('open'); });