CSS变换：旋转只适用于图像

Question

CSS变换：旋转只适用于图像

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>

当使用 Rotate() 脚本时，div 看起来像被旋转了，但是在使用 Firebug 查看时，可以看到 div 仍然在原位置。我是否做错了什么或者使用了错误的工具来完成任务？

编辑：

谢谢回复！我将背景设置为黄色，这样它就变成了一个黄色的框，但是在 Firebug 中单击 div 名称时，它显示 div 仍处于其原始位置。 lightblue is the original position of the div

- Vlad

无论是在img标签上调用onclick =“Rotate（）”还是在调用onclick =“Rotate（）”的DIV上编写css（宽度和高度），都可以实现旋转效果。 - defau1t

嘿，我更新了我的示例，并附上了链接，证明你的代码可以正常工作。我认为你被Firebug搞糊涂了，因为它显示div仍在原来的位置。实际上，变换并没有移动元素的位置，至少不会以影响其他元素的方式移动，所以虽然它已经移动了，但布局引擎不需要知道这一点！ - Jamund Ferguson

2个回答

2

请看这个有3张旋转图片的例子

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选择器的内容 :) 希望这能帮助到您。

PS：我也使用了 Google Chrome 的 CSS 属性 -webkit-transform :)

- Neysor

好的想法，但不要使用 attr(data-，而应该使用 .data()！ - Jamund Ferguson

是的，我必须这样做... 坏习惯 :D - Neysor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jamund Ferguson · Accepted Answer

这绝对被应用于<div>标签。只需为<div>添加宽度和背景颜色，即可看到它的正确工作。

这里有一个我制作的示例，可以在鼠标悬停时进行旋转：

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

这里有更多关于如何使用CSS3 transform属性的信息：https://developer.mozilla.org/en/CSS/transform 我找到了一个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://dev.w3.org/csswg/css3-transforms/。以下是需要翻译的内容：

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