CSS transform：rotate只适用于图像 [英] CSS transform: rotate only works on image
问题描述
我有这个代码：
< html>
< head>
< script type =text / javascriptsrc =jquery-1.7.1.js>< / script>
< script type =text / javascriptsrc =jquery-ui-1.8.18.custom.min.js>< / script>
< / head>
< body>
< div id =divonclick =Rotate（）>
< img src =image.pngheight =40width =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 viewd时，我会看到 div 仍然在同一位置。
编辑：
我在做错误的事情，
感谢您的回应！我将背景设置为黄色，它转向黄色框，但是当点击在Firebug中的div名称，它显示该div仍然在其原始位置。
它绝对适用于< div> 。只需向div添加宽度和背景颜色即可查看其是否正常工作。
这里是一个例子我扔在一起旋转悬停：
HTML：
< div id =awesome>
< img src =/ img / logo.png>
< / div>
CSS：
code> 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如何使用css3 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;
}
firebug不显示更改的原因是的规范，其中说：transform属性不影响内容周围的变换元素的流。 http://dev.w3.org/csswg/css3-transforms/ p>
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, thedivseems like been rotated, but when viewd with Firebug, I can see thatdivis 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.
解决方案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; }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/
这篇关于CSS transform：rotate只适用于图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
