Question

我想旋转一个div。经过大量的研究，除非使用jquery库，否则没有使用css转换来旋转div的javascript。问题是我想做一个小的旋转，并为此添加库不是我的选项.Css转换不适用于IE。

使用this example clock分钟，小时和秒使用javascript本身旋转。

任何人都可以帮助我在IE7上使用div来旋转，使用javascript本身而不需要任何其他库吗？

Answer 1

有点晚了，但我写了一些代码来做这件事。

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

可以与常规对象一起使用，也可以与JQuery对象一起使用。并存储一个名为“rotation”的属性，为您提供当前的旋转值。你可以玩这个，看看你能想出什么。

Answer 2

可以在没有javascript和jQuery的情况下使用原始CSS：

$('#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 */
});

您最明确地可以使用简单的javascript更改元素属性，例如：

document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");

Answer 3

我不明白为什么不使用jQuery时更简单的解决方案呢？

这是我写的快速脚本

$(document).ready(function(){
    $('#element').easyRotate({
       degrees: 45
    });
});

对于javascript，您需要制作div的图片，然后在div中旋转这些图片。我做了一个简单的例子：

<!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>

使用javascript旋转

3 个答案: