CSS转换：仅适用于图像

我有这个代码：

      
  
  var x = 1; function Rotate() { var angle = (90 * x); $("div").css("-moz-transform", "rotate(" + angle + "deg)"); x++; } 

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

编辑：

谢谢你的回复！ 我将背景设置为黄色并且它变成黄色框但是当点击Firebug中的div名称时，它显示div仍处于其原始位置。

Answer 1

它肯定被应用于

。 只需在div中添加宽度和背景颜色，即可看到它正常工作。

这是我在hover时旋转的一个例子 ：

HTML：

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转换属性的更多信息

我发现有一个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没有显示变化的原因是因为规范，它说：“转换属性不会影响转换元素周围内容的流动。” http://dev.w3.org/csswg/css3-transforms/

Answer 2

看看这个例子有3个旋转的照片

HTML：

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的最后一个data-rotate 。 如果你不明白为什么使用.rp :)请阅读CSS选择器 。希望它有所帮助。

PS：我也使用谷歌Chrome css属性-webkit-transform 🙂