Pull to refresh

css Rotate. Возможен и в IE

Reading time2 min
Views14K
Буду краток.
css свойство transform:rotate в ИЕ не доступно.
Но все знают что есть фильтр progid:DXImageTransform.Microsoft.Matrix, который конечно поворачивает изображение. Но скажем так не совсем правильно.
99% статей про использование этого фильтра содержат примерно такую фразу.
filter: матрица трансформации
left:?
right:?
*ps: left и right находятся эмпирически

На самом деле это не так.

Я не буду тут вставлять километры кода.
Ограничусь главным

1. Высчитываем угол
var rad = (angle * Math.PI) / 180.0;
cos = Math.cos(rad),
sin = Math.sin(rad);


2. Получаем матрицу трансформации
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';

3. На этот пункте мы получим специфическое смешение по X и Y
Можно конечно провести простейшие матричные операции и получить этот самый искомый офсет, но на самом деле — можно еще проще(я так думаю что матрицы все давно уже позабыли)

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

Тоесть

var sizeopt={
w:test.width(),
h:test.height()
};
.....
//узнаем какие размеры у обьекта сейчас
var w=test.width();
var h=test.height();
//и сместим на дельту разницы
test.css({'margin-left':-Math.round((w-sizeopt.w)/2),'margin-top':-Math.round((h-sizeopt.h)/2)});


Пример, чистый исходник

Открывать примеры НЕ в ИЕ — смысла нет.
Любителям прекрастного — есть более каноническое решение, в том числе с возможность управлять поворотом через css — cssSandpaper — там можно найти и классическую математику и различные workaround враперов вокруг крутящийся элементов. Но кода там очень много. Лично для моих задач лишнего.

PS: жизнь прекрасна, как не крути
Tags:
Hubs:
Total votes 54: ↑46 and ↓8+38
Comments30

Articles