Cross Browser Way to Rotate Image Using CSS

Cross browser way to rotate image using CSS?

http://jsfiddle.net/tJkgP/2/

CSS to rotate by 45 degrees:

.desk
{
    width: 50%;
    height: 400px;
    margin: 5em auto;
    border: solid 1px #000;
    overflow: visible;
}
.desk img
{
    behavior:url(-ms-transform.htc);
    /* Firefox */
    -moz-transform:rotate(45deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(45deg);
    /* Opera */
    -o-transform:rotate(45deg);
    /* IE9 */
    -ms-transform:rotate(45deg);
    /* IE6,IE7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

}

IE6-8 CSS came from here: CSS rotate property in IE

CSS Cross-browser Text Rotation

Try this website to generate a CSS rule for IE.Matrix Calculator

In the answer part it's explained how to use it and why you need it.

It will look like this:

.rot90 {
-ms-filter:"The rule you get from the website"
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);

-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;

border: 0px solid;
white-space: nowrap;
position:absolute;
display:inline-block;

padding-bottom: 5px;

writing-mode: tb-rl;}

CSS3 rotate3D cross-browser issue

I think you encounter the same bug from this question :
CSS Flip Transition Between Two <div>'s

It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :

.cube:hover{
    -moz-transform: rotateY(-90deg);
    -webkit-transform:rotateY(-89.9deg);
    transform:rotateY(-90deg);
}

It's quite hacky but I never found any clean solution.
You can also use pointer-events: none; property in some way to make it works.

Rotating an image using css

You can do it in Firefox using these CSS transforms - as for other browsers, I think you'll need Javascript. I'd recommend you perhaps take a look at the Raphael library.

CSS rotation cross browser with jquery.animate()

CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

You can read more about the step-callback here: http://api.jquery.com/animate/#step

http://jsfiddle.net/UB2XR/23/

And, btw: you don't need to prefix css3 transforms with jQuery 1.7+

Update

You can wrap this in a jQuery-plugin to make your life a bit easier:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  return this.each(function() {
    var $elem = $(this);

    $({deg: 0}).animate({deg: angle}, {
      duration: duration,
      easing: easing,
      step: function(now) {
        $elem.css({
           transform: 'rotate(' + now + 'deg)'
         });
      },
      complete: complete || $.noop
    });
  });
};

$('#MyDiv2').animateRotate(90);

http://jsbin.com/ofagog/2/edit

Update2

I optimized it a bit to make the order of easing, duration and complete insignificant.

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

Update 2.1

Thanks to matteo who noted an issue with the this-context in the complete-callback. If fixed it by binding the callback with jQuery.proxy on each node.

I've added the edition to the code before from Update 2.

Update 2.2

This is a possible modification if you want to do something like toggle the rotation back and forth. I simply added a start parameter to the function and replaced this line:

$({deg: start}).animate({deg: angle}, args);

If anyone knows how to make this more generic for all use cases, whether or not they want to set a start degree, please make the appropriate edit.

The Usage^{...is quite simple!}

Mainly you've two ways to reach the desired result. But at the first, let's take a look on the arguments:

jQuery.fn.animateRotate(angle, duration, easing, complete)

Except of "angle" are all of them optional and fallback to the default jQuery.fn.animate-properties:

duration: 400
easing: "swing"
complete: function () {}

1st

This way is the short one, but looks a bit unclear the more arguments we pass in.

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

2nd

I prefer to use objects if there are more than three arguments, so this syntax is my favorit:

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

How to rotate an image on click

Firstly note that your issue is because the selector is incorrect. It should be $('#showLayers') not $('#showLayers img') - or even just $(this) as you're in the scope of the click handler.

Secondly, note that you can improve the logic by using CSS for the animation and simply toggling the class in JS as needed:

$('#showLayers').click(function() {  $(this).toggleClass('rotate');});

#showLayers {  transition: transform 0.3s;}
.rotate {  -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg);  -o-transform: rotate(180deg);  -ms-transform: rotate(180deg);  transform: rotate(180deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />

#hamburger.active {
  #top {
    transform: translateY(7px) rotate(45deg);
    -moz-transform: translate(-5px,3px) rotate(45deg);
  }
  #middle {
    transform: rotate(135deg);
  }
  #bottom {
    transform: translateY(-7px) rotate(45deg);
    -moz-transform: translate(5px,-7px) rotate(45deg);
  }
}