JSFiddle - React, Tailwind, and code Playground

by garreh

HTML

<button>Rotate</button>

<img src="http://www.vieuxbandit.org/blog/wp-images/quotes/rimmer.gif"/>

JavaScript

/*   * JQuery CSS Rotate property using CSS3 Transformations  * Copyright (c) 2011 Jakub Jankiewicz  <http://jcubic.pl>  * licensed under the LGPL Version 3 license.  * http://www.gnu.org/licenses/lgpl.html  */ (function($) {     function getTransformProperty(element) {         var properties = ['transform', 'WebkitTransform',                           'MozTransform', 'msTransform',                           'OTransform'];         var p;         while (p = properties.shift()) {             if (element.style[p] !== undefined) {                 return p;             }         }         return false;     }     $.cssHooks['rotate'] = {         get: function(elem, computed, extra){             var property = getTransformProperty(elem);             if (property) {                 return elem.style[property].replace(/.*rotate\((.*)deg\).*/, '$1');             } else {                 return '';             }         },         set: function(elem, value){             var property = getTransformProperty(elem);             if (property) {                 value = parseInt(value);                 $(elem).data('rotatation', value);                 if (value == 0) {                     elem.style[property] = '';                 } else {                     elem.style[property] = 'rotate(' + value%360 + 'deg)';                 }             } else {                 return '';             }         }     };     $.fx.step['rotate'] = function(fx){         $.cssHooks['rotate'].set(fx.elem, fx.now);     }; })(jQuery);


$('button').click(function() {
    $('img').animate({ rotate: 180 });
});