JSFiddle - React, Tailwind, and code Playground

by darkstarsys

HTML

<img src="http://placekitten.com/100/100/" data-rotate="90">
<img src="http://placekitten.com/110/110/" data-rotate="709">
<img src="http://placekitten.com/120/120/">

<!-- or use CSS -->
<img src="http://placekitten.com/130/130/" class="rotate90">

CSS

img {
    margin: 20px;
    transition: all 400ms; 
}

/* or use CSS */
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

JavaScript

$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + $(this).data('rotate') + 'deg)';
    $(this).css({ 
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate 
    });
});