JSFiddle - React, Tailwind, and code Playground

by Nikita Jadhao

HTML

<div class="row-1">
    <div class="a">1</div>   
    <div class="b">2</div>   
    <div class="c">3</div>   
</div>
<div class="row-2">
    <div class="a">4</div>   
    <div class="b">5</div>   
    <div class="c">6</div>   
</div>
<div class="row-3">
    <div class="a">7</div>   
    <div class="b">8</div>   
    <div class="c">9</div>   
</div>

CSS

div{
    width:100px;
    height:100px;
    display: inline-block;
    transition: all 1s ease-in-out;
}
div>div{
    background-color:#34586E;
   transform: rotateX(0deg); 
}
.row-1 .b{
    transform-origin:right;
    transform: rotateY(90deg); 
}
.row-3 .b{
    transform-origin:left;
    transform: rotateY(90deg); 
}
.row-2 .a{
    transform-origin:bottom;
    transform:rotateX(90deg);  
}
.row-2 .c{
    transform-origin:top;
    transform: rotateX(90deg);  
}
.row-1 .a , .row-1 .c{
    transform-origin:right;
    transform: rotateY(90deg);
}
.row-3 .c , .row-3 .a {
    transform-origin:left;
    transform: rotateY(90deg);
}

JavaScript

$(document).ready(function(){
    $('.row-2 .b').click(function() {
        step_2(step_1());
    });  
});

function step_1(){
     $('.row-1 .b').css("transform","rotateY(0deg)");
     $('.row-3 .b').css("transform","rotateY(0deg)")
     $('.row-2 .a').css("transform","rotateX(0deg)");
     $('.row-2 .c').css("transform","rotateX(0deg)");  
}

function step_2(){
      $('.row-1 .a').css("transform","rotateY(0deg)");
      $('.row-3 .c').css("transform","rotateY(0deg)"); 
      $('.row-3 .a').css("transform","rotateY(0deg)");
      $('.row-1 .c').css("transform","rotateY(0deg)"); 
}

function step_3(){
     $('div > div').css("transform","rotateY(90deg)"); 
}