Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Make use of <code>WebkitTransform / -moz-transform: rotate(Xdeg)</code>. This will not work in IE, but Matt's <strong><a href="http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html" rel="noreferrer">zachstronaut</a></strong> solution doesn't work in IE either.</p> <p>If you want to support IE too, you'll have to look into using a <code>canvas</code> like I believe <strong><a href="http://raphaeljs.com/image-rotation.html" rel="noreferrer">Raphael does</a></strong>.</p> <p>Here is a simple jQuery snippet that rotates the elements in a jQuery object. Rotation can be started and stopped:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() { var $elie = $("img"), degree = 0, timer; rotate(); function rotate() { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { ++degree; rotate(); },5); } $("input").toggle(function() { clearTimeout(timer); }, function() { rotate(); }); }); </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;input type="button" value=" Toggle Spin " /&gt; &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt; &lt;img src="http://i.imgur.com/ABktns.jpg" /&gt;</code></pre> </div> </div> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload