JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumbnail">
  <img id="order_nail_img" src="https://i.imgur.com/KA2dxD6.jpg" alt="">
</div>

<div class="btn  bgSalmon W150 aCenter" id="choose_nail_reflect_updown">
    <a href="javascript:void(0);">upDown</a>
</div>

<div class="btn  bgSalmon W150 aCenter" id="choose_nail_reflect_side">
    <a href="javascript:void(0);">leftRight</a>
</div>

CSS

#choose_nail_reflect_side {
   
    margin-top: 56px;
}
#choose_nail_reflect_updown {

}

#order_nail_img {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}
.verticallyInverted {
    transform: rotateX(-180deg);
}
.horizontallyInverted{
    transform: rotateY(-180deg);
}
.allInverted {
    transform: rotate(-180deg);
}

JavaScript

$(document).ready(function(){
    
    $(document).on('click', '#choose_nail_reflect_side', function(e) {

        handleLeftrightClick();
    });
    $(document).on('click', '#choose_nail_reflect_updown', function(e) {

        handleUpdownClick();
    });


});
var imageEl = $('#order_nail_img');
function handleUpdownClick (){
      if(imageEl.hasClass("horizontallyInverted")) {
          imageEl.removeClass("horizontallyInverted");
          imageEl.addClass("allInverted");
      } else if(imageEl.hasClass("verticallyInverted")){
          imageEl.removeClass("verticallyInverted");
           //imageEl.addClass("allInverted");
      } else if(imageEl.hasClass("allInverted")) {
          imageEl.removeClass("allInverted");
          imageEl.addClass("horizontallyInverted");
      }else{
            imageEl.addClass("verticallyInverted");
          }
}

function handleLeftrightClick (){
          if(imageEl.hasClass("verticallyInverted")) {
              imageEl.removeClass("verticallyInverted");
              imageEl.addClass("allInverted");
          } else if(imageEl.hasClass("horizontallyInverted")){
              imageEl.removeClass("horizontallyInverted");
              // imageEl.addClass("allInverted");
          } else if(imageEl.hasClass("allInverted")) {
              imageEl.removeClass("allInverted");
              imageEl.addClass("verticallyInverted");
          }else{
            imageEl.addClass("horizontallyInverted");
          }
}