Вращение элемента div

Можно ли повернуть элемент div с помощью Javascript и НЕ использовать HTML 5?

Если это так, какие атрибуты элемента я устанавливаю/изменяю, чтобы заставить его вращаться? Т.е., div.what?

PS: Когда я говорю "rotate", я имею в виду поворот изображений вокруг оси, а не каждые x миллисекунд, показывающие другое вращение изображения.

Ответы

Ответ 1

Старый вопрос, но ответ может помочь кому-то...

Вы можете вращать элементы, используя проприетарную разметку CSS во всех основных браузерах (термин HTML5 здесь не имеет особого значения).

Пример того, как поворачивать элемент на 45 градусов с помощью CSS:

.example {
    -webkit-transform: rotate(45deg); /* Chrome & Safari */
    -moz-transform: rotate(45deg); /* Firefox */
    -ms-transform: rotate(45deg); /* IE 9+ */
    -o-transform: rotate(45deg); /* Opera */
    transform: rotate(45deg); /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}

Да, синтаксис MSIE - это ужасно. Обратите внимание на "sizingMethod = 'auto expand" - это важно, чтобы избежать обрезания результата.

Я уверен, что преобразования Matrix (по крайней мере, в некоторой степени) также поддерживаются в MSIE 6, но это более задумчиво в отношении того, при каких обстоятельствах он их поддерживает (и все труднее заботиться 8).

Ответ 2

Да, можно повернуть div, не используя HTML5, но используя CSS3.

Вы можете поэкспериментировать с вращением CSS на CSS3 Пожалуйста (переключите правило .box_rotate).

Для получения дополнительной информации Google для: css rotate

Если вам нужен способ поворота текста, который работает во всех браузерах (включая IE6), попробуйте Raphaël.

Ответ 3

Я знаю, что опаздываю. Для потомков я хотел опубликовать this: этот сайт довольно хорош, и он даже выполняет преобразования матрицы для своих соответствующих css3-копий

Ответ 4

Вы можете сделать это, используя Matrix в IE. Вот функция, которая решает ее попеременно.

http://kaisarcode.com/javascript-rotate