CSS3 имеет стиль transform, который позволяет вращать любой элемент HTML.Вы бы использовали его так:
.myelement {
transform:rotate(45deg);
}
Это должно работать в последних версиях большинства браузеров (Firefox 5, Chrome 13, IE9 и т. Д.).Однако в старых браузерах могут возникнуть проблемы.
В некоторых старых браузерах требуются префиксы поставщиков, поэтому вам понадобятся -moz-transform и -webkit-transform и т. Д.
Старые версии IE не поддерживаютстиль transform вообще, но у них есть атрибут filter, который можно использовать вместо него.К сожалению, синтаксис фильтра IE для ротации довольно сложен.Вы должны указать матричное преобразование со значениями в радианах, а не в градусах, чтобы оно могло быть немного неясным.
Для поворота на 45 градусов вы должны использовать следующий код:
.myelement {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');
}
Вы заметите, что IE6 и IE7 требуют стиля filter, тогда как IE8 требует -ms-filter (с немного отличающимся синтаксисом).
Вместо того, чтобы объяснять это здесь, я укажу вам настраница, где это объясняется подробно: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
Последнее замечание по поводу стиля filter: синтаксис IE6 / 7 является недопустимым CSS (из-за двоеточия после progid, среди прочеговещи).Я видел, что на самом деле другие браузеры (особенно Firefox 3.6) не могут анализировать всю таблицу стилей.По этой причине я рекомендую использовать его в отдельной специфической для IE таблице стилей, которую вы можете полностью исключить из других браузеров.
Если вы хотите сделать это через Javascript, я бы рекомендовал использовать плагин JQuery.избавит от сложности написания отдельного кода для всех браузеров.Смотрите здесь для получения дополнительной информации: http://plugins.jquery.com/plugin-tags/rotate
Надеюсь, что помогает.