Rotando un div
HTML
<h2>Dale click para hacerlo rotar</h2>
<div class="main">
<div class="movable">
<img src="http://upload.wikimedia.org/wikipedia/en/b/bc/NaVi_LOGO.jpg"
alt="navi"/>
<div class="editable" contenteditable="true">
Natus Vincere Winner!!! (editame)
</div>
</div>
</div>
CSS
div.main {
padding: 30px;
}
div.movable {
padding: 60px;
border: 1px solid black;
display:inline-block;
}
div.editable {
margin: 10px;
border: 1px solid black;
height: 100px;
}
img {
border: 1px solid black;
}
JavaScript
$(function() {
var degrees = 10;
$("div.movable").on("hover", function() {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'-0-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
degrees = degrees + 10
});
});