Столкнулся с задачей поворота блоков в ИЕ8 и ИЕ7. Посмотрел библиотеки Raphaël и jqueryrotate, обе не подошли, так как первая создает SVG или тег canvas, а вторая применяется только для изображения, которое задается в тег img в аттрибуте src. А мне был необходим разворот блока, чтобы можно было картинки и текст с ссылками ставить.
Поиски в гугл привели меня к фильтру Matrix, который в ЦСС выглядит следующим образом:
.block_class { filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122081,M12=0.17364817766692991,M21=-0.17364817766692991,M22=0.9848077530122081,SizingMethod='auto expand'); }
Где поворот блока задается в значениях M11, M12, M21, M22.
Для вычисления этих значений нам надо узнать сколько радиан в градусах, на количество которых надо повернуть блок, и взять косинус и синус от этого значения:
M11 — косинус
M12 — синус * (-1)
M21 — синус
M22 — косинус
Или можно написать джаваскриптовую функцию, которая будет считать эти значения:
function fnSetRotation(deg) { var deg2radians = Math.PI * 2 / 360; var rad = deg * deg2radians ; var costheta = Math.cos(rad); var sintheta = Math.sin(rad); // Выводим получившиеся значения console.log([costheta,-sintheta,sintheta,costheta]); }
В случае, если необходимо назначить поворот какому-то блоку:
function fnSetRotation(oObj,deg) { var deg2radians = Math.PI * 2 / 360; var rad = deg * deg2radians ; var costheta = Math.cos(rad); var sintheta = Math.sin(rad); oObj.filters.item(0).M11 = costheta; oObj.filters.item(0).M12 = -sintheta; oObj.filters.item(0).M21 = sintheta; oObj.filters.item(0).M22 = costheta; }
Значение SizingMethod имеет 2 значения:
1. auto expand — поворачивает блок как есть
2. clip to original — обрезает области, которые выходят за пределы начального блока. Похоже, когда у родительского блока назначены свойства стилей overflow: hidden, а дочернему блоку сделать разворот, то все, что выйдет за родительский блок будет обрезано.
Жесть, под IE7-8 такое сделать это велосипед писать. Либо говорите заказчику что это нереально сделать быстро и легко под эти браузеры, либо пусть раскошелится на «велосипед» и делайте его, либо просите очень грамотного спеца javascript, пусть пишет плагин. Я бы вообще отказался делать крайние излишества для IE ниже 9й версии.
Обратите внимание, это не просьба помочь, это готовое решение на определённом проекте :)
зааавтыкаааал!! пардон!!