I wanted to rotate a div. After a lot of research, there is no javascript to rotate a div without using the css transform, unless jquery library is used. The problem is I want to do a small rotation, and adding the library for that is not an option for me.Css transform does not work on IE.
With this example clock the minutes, hours and seconds rotate using javascript itself.
Can anyone help me get a div to rotate on IE7, and above using javascript itself without any additional libraries?
I wanted to rotate a div. After a lot of research, there is no javascript to rotate a div without using the css transform, unless jquery library is used. The problem is I want to do a small rotation, and adding the library for that is not an option for me.Css transform does not work on IE.
With this example clock the minutes, hours and seconds rotate using javascript itself.
Can anyone help me get a div to rotate on IE7, and above using javascript itself without any additional libraries?
Share edited Feb 10, 2012 at 17:07 Incognito 20.8k15 gold badges82 silver badges121 bronze badges asked Aug 5, 2011 at 6:53 slovaiwislovaiwi 211 silver badge2 bronze badges 5- Nothing rotates on that clock, and it doesn't use just JavaScript. There is a separate div for every dot, and JS accesses the DOM to move each div that makes up the hand that is being moved. – Quentin Commented Aug 5, 2011 at 7:04
- Mmmmm css3pie. tastes goooooood. (Hint: CSS3 on IE) – Fred Commented Aug 5, 2011 at 7:07
- @Fred I dare you to rotate something in ie8 and lower by using css3pie. css3pie./documentation/supported-css3-features – Joonas Commented Aug 5, 2011 at 10:03
- @Lollero: A ha, I did not realise. :D – Fred Commented Aug 5, 2011 at 10:14
- You may find w3fools. useful... – Dvir Berebi Commented Dec 10, 2011 at 18:08
3 Answers
Reset to default 3It's a bit late, but I have written some code to do this.
http://jsfiddle/rlemon/73DzT/
Object.prototype.rotate = function(d) {
var s = "rotate(" + d + "deg)";
if (this.style) { // regular DOM Object
this.style.MozTransform = s
this.style.WebkitTransform = s;
this.style.OTransform = s;
this.style.transform = s;
} else if (this.css) { // JQuery Object
this.css("-moz-transform", s);
this.css("-webkit-transform", s);
this.css("-o-transform", s);
this.css("transform", s);
}
this.setAttribute("rotation", d);
}
can be used with regular objects or with JQuery objects. and stores an attribute called "rotation" to give you it's current rotation value. You can play around with this and see what you can e up with.
It's possible to do using raw CSS without javascript and jQuery:
$('#idElement').css({
/*modern browsers*/
'-moz-transform':'rotate(88deg)',
'-webkit-transform':'rotate(88deg)',
'-o-transform':'rotate(88deg)',
'-ms-transform':'rotate(88deg)'
/*IE:*/
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476), /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
});
You can most definately change element attributes using simple javascript such as:
document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");
I don't get it why not using jQuery when its lots easier solution?
Here is fast script i written
$(document).ready(function(){
$('#element').easyRotate({
degrees: 45
});
});
For javascript you need to make pictures of your div and than rotate those pictures inside the div. I made simple example of doing that:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="div1">
<img name="img1" src="myimage1.jpg" id="img1">
<br>
<br>
<input type="button" value="Rotate this image" onclick="rotate()">
</div><script type="text/javascript">
var tally = 0;
function rotate() {
if (tally == 0) {
document.images["img1"].src= "myimage2.jpg";
tally = 1;
return true;
}
else {
document.images["img1"].src= "myimage1.jpg";
tally = 0;
return true;
}
}
</script>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745059673a4608887.html
评论列表（0条）