JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="wrapper">
<div class="holder">
    <div class="box-3d">3D box</div>
    <div class="back-side">back side</div>
</div>
</div>

CSS

.wrapper {
    background: #ccc;
    padding: 20px;
    height: 300px;
}

.holder {
    height: 200px;
    margin: 0 auto;
    width: 200px;  
        -webkit-transition: all 5s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    
-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-style: preserve-3d;
    transform-origin: 50% 50%;
    -webkit-transform: perspective(400px) rotate3d(1,0,0,0deg);
    -moz-transform: perspective(900px) rotate3d(1,1,0,-45deg);
    -o-transform: perspective(900px) rotate3d(1,1,0,-45deg);
    -ms-transform-style: preserve-3d;
    transform: perspective(300px) rotate3d(1,1,1,-45deg);    
}
.wrapper:hover .holder {


    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-style: preserve-3d;
    transform-origin: 50% 50%;
    -webkit-transform: perspective(400px) rotate3d(1,0,0,-180deg);
    -moz-transform: perspective(900px) rotate3d(1,1,0,-45deg);
    -o-transform: perspective(900px) rotate3d(1,1,0,-45deg);
    -ms-transform-style: preserve-3d;
    transform: perspective(300px) rotate3d(1,1,1,-45deg);
    -webkit-backface-visibility: hidden;
    z-index: 1;


-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */    
backface-visibility:hidden;    
    
}
.wrapper:hover .back-side {
   z-index: 2;
    -webkit-transform-style:...