javascript - 使用javascript将div旋转一定 Angular

标签 javascript rotation angle

我想使用 javascript 将 div 顺时针旋转一个 Angular ,比如 60 度。

通过谷歌的很多链接,一个合理的解决方案似乎是使用数学库,但我不知道如何实现上述问题。三 Angular 学从来都不是我的菜:|

这可以通过 jQuery 轻松完成,但我不允许使用任何库。 通过谷歌搜索,我发现了砂纸等。但必须使用可用的 javascript 函数来完成。 另外,由于是在IE6上,所以不能使用CSS3。 :/

那么,假设我想将测试 div 旋转一个 Angular ,我该怎么做?

<html>
    <head>
        <style>#test {background:#000; width:100px; height:100px;}</style>
    </head>

<body>
    <div id="test"></div>
</body>
</html>

谢谢:)

最佳答案

好吧,试试这个。这会旋转一个盒子(在 IE8 中)并且应该在 IE6 中工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <title>IE6 rotation test</title>
        <style type="text/css">
            #spinner {
                position: absolute;
                top: 100px;
                left: 100px;
                width: 200px;
                height: 100px;
                border: 2px solid red;
                filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')
            }
        </style>
        <script type="text/javascript">
var spinnerAngle = 0;

window.onload = function() {
    setInterval(function () {
        spinnerAngle += Math.PI / 64;
        setElementAngle(document.getElementById('spinner'), spinnerAngle);
    }, 25);
}

function setElementAngle(ele, radians)
{
     costheta = Math.cos(radians);
     sintheta = Math.sin(radians);

     ele.filters.item(0).M11 = costheta;
     ele.filters.item(0).M12 = -sintheta;
     ele.filters.item(0).M21 = sintheta;
     ele.filters.item(0).M22 = costheta;
}
        </script>
    </head>
    <body>
        <div id="spinner"></div>
    </body>
</html>

参见the documentation for the Matrix filter 。 “sizingMethod”设置显然是必要的。

关于javascript - 使用javascript将div旋转一定 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6932131/

相关文章:

java - 在 Android 中旋转文本(不是图像)

java - 找到要旋转的度数?

javascript - Three.js 旋转面向对象

javascript - 是否可以保证 onchange 将在添加到标记的事件之前运行?

javascript - 从 html 调用函数内部的 JavaScript 函数

matrix - 如何使用原始陀螺仪数据°/s来计算3D旋转?

math - 在鸟瞰游戏中计算正确的 Sprite 方向图像? (这里的数学可能是速度矢量到度角?)

javascript - 在 IE 上运行 React 应用程序时出现语法错误

javascript - 表 - 使用 jQuery 进行实时搜索

iOS ViewController uilabel 仅在标签栏应用程序中旋转时更新