Последовательное происхождение в ротации CSS между IE8 и всем остальным?
Возможно получить кросс-браузерное вращение текста в CSS, используя вариантыtransform:rotate(XXdeg); для обычных браузеров (в том числе IE9 +, используя с-moz-, -webkit-, -ms- префиксы для покрытия старых версий). Затем для IE8 и co (должно работать в IE6 +, хотя IE6 и IE7 почти не заботятся: IE8 по-прежнему вызывает озабоченность), используя матричные преобразования следующим образом:
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=[ COSINE OF ANGLE ],
M12=[ SINE OF ANGLE ],
M21=[ -1 x SINE OF ANGLE ],
M22=[ COSINE OF ANGLE ],
sizingMethod='auto expand);
...например.filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.76604444, M12=0.64278761, M21=-0.64278761, M22=0.76604444,sizingMethod='auto expand');
Проблема вэти два метода имеют различное происхождение преобразования, что означает, что, хотя они будут иметь одинаковые углы, положение повернутого элемента различается в разных браузерах, и то, как оно меняется, зависит от угла и размера элемента, поэтому его фиксация выполняется с помощью позиционирования. простая задача
Вот живая демонстрация, иллюстрирующая это:http://jsbin.com/edudof/2/
В не-IE8, можно установить источник преобразования следующим образом:transform-origin: 50% 50%; (указывает значение по умолчанию). Я не могу найти никакого эквивалента с преобразованием матрицы фильтра IE8, и я попытался установить источник не-IE, чтобы он соответствовал источнику IE (который я прочитал - хотя и на случайных статьях в блоге - очевидно, в левом верхнем углу элемент, ноtransform-origin: top left; это далеко).
Меня не очень беспокоит, что является источником трансформации (хотя получение всего 50%, 50% было бы идеальным). Приоритетом является постоянный результат в разных браузерах.
Еще две вещи, которые я нашел и попробовал:
Очень длинная статья, описывающая теоретический (непроверенный?) Подход, который можно использовать для написания кода, который делает это в Javascript. Это требует ручного позиционирования, а также двух дополнительных слоев матричной манипуляции.https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ieБиблиотека javascriptcss3Sandpaper, Он имеет 3 зависимости и во всех моих тестах - в том числе, просто запускает включенные тестовые файлы - он на самом деле ничего не вращает (нет ошибок, он просто ничего не делает)