Столкнулся с задачей поворота блоков в ИЕ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, а дочернему блоку сделать разворот, то все, что выйдет за родительский блок будет обрезано.

Оценить:|
  
Комментировать
Раздел: CSS    
Просмотров: 3138
Комментариев (3)
  1. AlexNGerman
    AlexNGerman
    30.11.2012 в 17:25

    Жесть, под IE7-8 такое сделать это велосипед писать. Либо говорите заказчику что это нереально сделать быстро и легко под эти браузеры, либо пусть раскошелится на «велосипед» и делайте его, либо просите очень грамотного спеца javascript, пусть пишет плагин. Я бы вообще отказался делать крайние излишества для IE ниже 9й версии.

Оставить комментарий