Поверните div на угол, используя JavaScript - PullRequest
Новая
       12

Поверните div на угол, используя JavaScript

0 голосов
/ 03 августа 2011

Я хочу повернуть div на угол, скажем, 60 градусов, по часовой стрелке с помощью javascript.

Для многих ссылок через Google логическое решение кажется с использованием библиотеки Math, но я не знаюкак реализовать вышеуказанную проблему.Тригонометрия никогда не была моей чашкой чая: |

Это можно сделать легко с помощью jQuery, но мне не разрешено использовать любую из библиотек.Погуглив, наткнулся на наждачную бумагу и тд.но делать это нужно с помощью доступных функций JavaScript.Кроме того, поскольку он на IE6, CSS3 не может быть использован.: /

Итак, скажем, я хочу повернуть тестовый div на угол, как мне это сделать? 

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

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

Спасибо :))

1 Ответ

2 голосов
/ 03 августа 2011

Хорошо, попробуйте это.Это раскручивает окно (в 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>

См. документацию для матричного фильтра .Настройка "sizingMethod", по-видимому, необходима.

...