JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="page">
    <div class="main-side">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id risus massa. Suspendisse pulvinar, tellus eget suscipit tincidunt, tellus quam varius lectus, vitae blandit dui orci nec lorem. Donec lobortis feugiat tortor, non pellentesque nisl euismod in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

CSS

body{
    padding: 50px;
}
.page{
    background: gray;
    
    width: 250px;
    padding: 10px;
    
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
}
.page.opening{
    animation: myfirst 2s;
    -moz-animation: myfirst 2s; /* Firefox */
    -webkit-animation: myfirst 2s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {}
to {
    transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg); /* Safari and Chrome */
    -moz-transform:rotateY(90deg); /* Firefox */
}
}

@-moz-keyframes myfirst /* Firefox */
{
from {}
to {
    transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg); /* Safari and Chrome */
    -moz-transform:rotateY(90deg); /* Firefox */
}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {}
to {
    transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg); /* Safari and Chrome */
    -moz-transform:rotateY(90deg); /* Firefox */
}
}

JavaScript

$(document).ready(function(){
    $('.page').click(function(){
        $(this).addClass('opening');
    });
});