JSFiddle - React, Tailwind, and code Playground

rotation with top+left

by web-nfo.com

HTML

<div id="container">
    <div id="example1">
        <img id="image1" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
        <div id="recreate1"></div>
    </div>
    <div id="example2">
        <img id="image2" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
        <div id="recreate2"></div>
    </div>
    <div id="example3">
        <img id="image3" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
        <div id="recreate3"></div>
    </div>
    <div id="example4">
        <img id="image4" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
        <div id="recreate4"></div>
    </div>
    <div id="example5">
        <img id="image5" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
        <div id="recreate5"></div>
    </div>
    <div id="example6">
        <img id="image6" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
        <div id="recreate6"></div>
    </div>
</div>

CSS

*{ font-family:"courier new",courier; font-size:13px; }
p { margin:0px 0px 10px 0px; padding:0px; }
span { position: absolute; bottom:5px; left:5px; color:#FFF; }
#container { padding:40px; }

#example1, #example2, #example3, #example4, #example5, #example6 {
    display:inline-block;
    background: #333;
    position:relative;
    padding:80px 30px;
    margin:1px;
    width:150px;
}
#recreate1, #recreate2, #recreate3, #recreate4, #recreate5, #recreate6 {
    border:2px solid red;
    position:absolute;
    top:50px;
    left:50px;
    /*-webkit-transform-origin:50% 50% !important;*/
}
#image1, #image2, #image3, #image4, #image5, #image6 {
    position:absolute;
    top:50px;
    left:50px;
}
#recreate4, #image4 {
    -moz-transform-origin: 14% 50% !important;
    -webkit-transform-origin: 14% 50% !important;
    -o-transform-origin: 14% 50% !important;
    -ms-transform-origin: 14% 50% !important;
    transform-origin: 14% 50% !important;
}
#recreate4, #recreate5, #recreate6 {
    border:1px solid green;
}
#recreate6, #image6 {
    -moz-transform-origin: 130px 17px !important;
    -webkit-transform-origin: 130px 17px !important;
    -o-transform-origin: 130px 17px !important;
    -ms-transform-origin: 130px 17px !important;
    transform-origin: 130px 17px !important;
}

JavaScript

(function($) {
    var supportedCSS,supportedCSSOrigin, styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
    for (var a = 0; a < toCheck.length; a++) if (styles[toCheck[a]] !== undefined) { supportedCSS = toCheck[a]; }
    if (supportedCSS) {
      supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/,"TransformOrigin");
      if (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0] = "t";
    }

    // Bad eval to preven google closure to remove it from code o_O
    eval('IE = "v"=="\v"');

    jQuery.fn.extend({
        rotate:function(parameters)
        {
          if (this.length===0||typeof parameters=="undefined") return;
          if (typeof parameters=="number") parameters={angle:parameters};
          var returned=[];
          for (var i=0,i0=this.length;i<i0;i++)
          {
            var element=this.get(i);	
            if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {

              var paramClone = $.extend(true, {}, parameters); 
              var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;

              returned.push($(newRotObject));
            }
            else {
              element.Wilq32.PhotoEffect._handleRotation(parameters);
            }
          }
          return returned;
        },
        getRotateAngle: function(){
          var ret = [];
          for (var i=0,i0=this.length;i<i0;i++)
          {
            var element=this.get(i);	
            if (element.Wilq32 && element.Wilq32.PhotoEffect) {
              ret[i] = element.Wilq32.PhotoEffect._angle;
            }
          }
          return ret;
        },
        stopRotate: function(){
          for (var i=0,i0=this.length;i<i0;i++)
          {
            var element=this.get(i);	
            if (element.Wilq32 && element.Wilq32.PhotoEffect) {
              clearTimeout(element.Wilq32.PhotoEffect._timer);
            }
          }
       ...