3

I have this code:

<html>
<head>
    <script type = "text/javascript" src = "jquery-1.7.1.js"></script>
    <script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
    <div id = "div" onclick = "Rotate()">
        <img src="image.png" height="40" width="160">
    </div>

    <script type="text/javascript">
        var x = 1;
        function Rotate() {
            var angle = (90 * x);
            $("div").css("-moz-transform", 
                         "rotate(" + angle + "deg)");        
        x++;    
    }</scipt></body></html>

when using Rotate() script, the div seems like been rotated, but when viewd with Firebug, I can see that div is still in the same position. Am I doing something wrong or I am using wrong thing for the task I'm trying to accomplish?

Edit:

Thanks for the responses! I set the background to yellow and it turned the yellow box but when clicking on the div name in Firebug it shows that the div is still in its original position. lightblue is the original position of the div

Vlad
  • 31
  • 1
  • 3
  • Either you call onclick = "Rotate()" on img tag, or else you should write css(width and height) to your DIV on which you are calling onclick = "Rotate()" – defau1t Mar 19 '12 at 20:28
  • Hey I updated my example with a link to your code working fine. I think you're confused by firebug, because it shows the div in the original position. Transforms don't actually move the location of the element, at least not in a way that affects other elements, so while it has moved, the layout engine doesn't need to know about it! – Jamund Ferguson Mar 23 '12 at 15:59

2 Answers2

5

It's definitely being applied to the <div>. Just add a width and a background color to the div to see that it's working correctly.

Here's an example I threw together that rotates on hover:

HTML:

<div id="awesome">
    <img src="/img/logo.png">
</div>

CSS:

body {
  margin: 100px;
}

div {
 background: blue;
 width: 200px;
 -webkit-transition: all ease-in 1s; 
 -moz-transition: all ease-in 1s;    
 transition: all ease-in 1s; 
}

div:hover {
 background: yellow;
 -moz-transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 transform: rotate(30deg);
}

Here's some more info how to use the css3 transform property

There is a jQuery plugin I found that has an example of doing exactly what you're doing, but in a cross-browswer way. Check out: https://github.com/heygrady/transform

This plugin let's you do things like this:

$('div').click(function() {
    $(this).animate({rotate: '+=45deg'});
});

Edit:

Hey, here's a slightly cleaned up version of your original that works fine:

var x = 1;
$("#box").click(rotate);
function rotate() {
    var angle = (90 * x);
    $(this).css("-moz-transform", "rotate(" + angle + "deg)");
    x++;    
    if (x > 4) x = 0;
}

http://jsfiddle.net/UdYKb/1/

The reason firebug doesn't show the change is because of the spec, which says: "the transform property does not affect the flow of the content surrounding the transformed element." http://dev.w3.org/csswg/css3-transforms/

Jamund Ferguson
  • 16,721
  • 3
  • 42
  • 50
2

Look at this example with 3 rotating pics

HTML:

<div id = "div">
    <img src="http://dummyimage.com/100" class="rp" data-rotate="0">
    <img src="http://dummyimage.com/100" class="rp" data-rotate="0">
    <img src="http://dummyimage.com/100" class="rp" data-rotate="0">
</div>

JAVASCRIPT:

$().ready(function() {
    $(".rp").click(function() {
        var rot = (parseInt($(this).attr("data-rotate"))+90)%360;
        $(this).attr("data-rotate",rot);
        $(this).css("-webkit-transform", "rotate("+rot+"deg)");
        $(this).css("-moz-transform", "rotate("+rot+"deg)");
    });
});​

I Save the last rotation in the attribute data-rotate. Please read about CSS Selectors if you do not understand why using .rp :) Hope it helps.

PS: I used the Google Chrome css attribute -webkit-transform too :)

Neysor
  • 3,893
  • 11
  • 34
  • 66