Question

我有这段代码：

<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>

使用Rotate()脚本时，div似乎已被旋转，但在使用Firebug查看时，我可以看到div仍处于相同位置。我做错了什么，或者我正在使用错误的东西完成我想要完成的任务？

编辑：

感谢您的回复！我将背景设置为黄色并且它变为黄色框但是当在Firebug中单击div名称时，它显示div仍处于其原始位置。 lightblue is the original position of the div

Answer 1

它肯定适用于<div>。只需在div中添加宽度和背景颜色，即可看到它正常工作。

Here's an example我在悬停时一起旋转：

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);
}

这里还有一些info how to use the css3 transform property

我发现有一个jQuery插件，它有一个完全正在做的事情的例子，但是以一种交叉的方式。查看： https://github.com/heygrady/transform

这个插件让你做这样的事情：

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

修改

嘿，这是一个稍微清理过的原版本，可以正常工作：

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/

firebug没有显示更改的原因是因为spec，其中说：“transform属性不会影响转换元素周围内容的流动。” http://dev.w3.org/csswg/css3-transforms/

Answer 2

用3张旋转的照片查看this example

<强> 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)");
    });
});

我保存属性data-rotate中的最后一次旋转。如果您不明白为什么使用.rp，请阅读CSS Selectors :)希望它有所帮助。

PS：我也使用了Google Chrome css属性-webkit-transform：）

CSS转换：仅适用于图像

2 个答案: