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 acplish?
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.
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 acplish?
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.
Share edited Mar 20, 2012 at 10:59 Vlad asked Mar 19, 2012 at 20:23 VladVlad 311 silver badge3 bronze badges 2- Either you call onclick = "Rotate()" on img tag, or else you should write css(width and height) to your DIV on which you are calling onclick = "Rotate()" – defau1t Commented Mar 19, 2012 at 20:28
- Hey I updated my example with a link to your code working fine. I think you're confused by firebug, because it shows the div in the original position. Transforms don't actually move the location of the element, at least not in a way that affects other elements, so while it has moved, the layout engine doesn't need to know about it! – Jamund Ferguson Commented Mar 23, 2012 at 15:59
2 Answers
Reset to default 5It'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./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/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/csswg/css3-transforms/
Look at this example with 3 rotating pics
HTML:
<div id = "div">
<img src="http://dummyimage./100" class="rp" data-rotate="0">
<img src="http://dummyimage./100" class="rp" data-rotate="0">
<img src="http://dummyimage./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 :)
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742292873a4416530.html
评论列表（0条）