JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<div>
<button id="rotate" type="button" class="btn btn-default">Rotate <i class="fa fa-repeat"></i></button>
</div>
<br>
<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-new thumbnail">
    <img data-src="holder.js/100%x100%" alt="..." style="width:200px;height:200px">
  </div>
  <div class="fileinput-preview fileinput-exists thumbnail" style="max-width:200px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

CSS

.fileinput-preview {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}
.fileinput-preview.rotate90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}
.fileinput-preview.rotate180 {
    transform: rotate(180deg) translate(-100%,-100%);
    -webkit-transform: rotate(180deg) translate(-100%,-100%);
    -ms-transform: rotate(180deg) translateX(-100%,-100%);
}
.fileinput-preview.rotate270 {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);
}

JavaScript

var angle = 0;
$('#rotate').click(function () {
   angle = (angle + 90) % 360;
   $('.fileinput-preview').removeClass().addClass('fileinput-preview fileinput-exists thumbnail ' + "rotate" + angle);
});