CSS transform: rotate only works on image

Question

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是div的原始位置

Answer 1

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/

Answer 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 :)

CSS transform: rotate only works on image

Question

2 answers

solution1
5 2012-03-19 20:31:05

solution2
2 2012-03-19 20:42:27

CSS transform: rotate only works on image

Question

2 answers

solution1 5 2012-03-19 20:31:05

solution2 2 2012-03-19 20:42:27

solution1
5 2012-03-19 20:31:05

solution2
2 2012-03-19 20:42:27