JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div id="box" style="border: 2px solid red;">

<img id="img1" src="https://placehold.it/350x150">

</div>

<input id="button" type="button" value="Rotate 90 deg">

CSS

.rotate270 {
        -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
        -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
        -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
        -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
        transform: translateX(-100%) rotate(-90deg); /* W3C */  
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;        
    }
    
    .rotate90 {
        -webkit-transform: translateY(0%) translateX(42.8%) rotate(90deg); /* Safari */
        -moz-transform: translateY(0%) translateX(42.8%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
        -ms-transform: translateY(0%) translateX(42.8%) rotate(90deg); /* IE9 */
        -o-transform: translateY(0%) translateX(42.8%) rotate(90deg); /* Opera */
        transform: translateY(0%) translateX(42.8%) rotate(90deg); /* W3C */  
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -ms-transform-origin: top left;
        -o-transform-origin: top left;
        transform-origin: top left;        
    }
    
    .rotate180 {
        -webkit-transform:  translateX(-100%) translateY(100%) rotate(180deg); /* Safari */
        -moz-transform:  translateX(-100%) translateY(100%) rotate(180deg); /* Firefox 3.6 Firefox 4 */
        -ms-transform:  translateX(-100%) translateY(100%) rotate(180deg); /* IE9 */
        -o-transform:  translateX(-100%) translateY(100%) rotate(180deg); /* Opera */
        transform:  translateX(-100%) translateY(100%) rotate(180deg); /* W3C */
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;        
    }
    
    .rotate0 {
        -webkit-transform:...

JavaScript

$(document).ready(function() {
	$("#box").height($("#img1").height());
  $("#box").width($("#img1").width());
  var rotation = 0;
	function turn(deg) {
  	// Img height and width
  	var imgH = $("img").height();
    var imgW = $("img").width();
    
    console.log(imgH + " " + imgW);
    
    // Div
    $box = $("#box");
    // Img
    $img = $("#img1");
    
    // Make deg less than 360
    while(deg >= 360) {
    	deg -= 360;
    }
    
  	console.log(deg);
    
    // Check deg, adust height and width
    if(deg == 90) {
    	$img.addClass("rotate90");
      $img.removeClass("rotate2700");
      $img.removeClass("rotate180");
      $img.removeClass("rotate0");
    	$box.height(imgW);
      $box.width(imgH);
    } else if(deg == 270) {
    	$img.addClass("rotate270");
      $img.removeClass("rotate90");
      $img.removeClass("rotate180");
      $img.removeClass("rotate0");
    	$box.height(imgW);
      $box.width(imgH);
    } else if(deg == 180) {
    	$img.addClass("rotate180");
      $img.removeClass("rotate90");
      $img.removeClass("rotate270");
      $img.removeClass("rotate0");
    	$box.height(imgH);
      $box.width(imgW);
    } else {
    	$img.addClass("rotate0");
      $img.removeClass("rotate90");
      $img.removeClass("rotate180");
      $img.removeClass("rotate270");
      $box.height(imgH);
      $box.width(imgW);
    }
  }
  
  $("#button").on("click", function() {
  	turn(rotation + 90);
    rotation += 90;
  });


})