Последовательное происхождение в повороте 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 зависимости, и во всех моих тестах - включая запуск только включенных тестовых файлов - он нена самом деле ничего не вращается (без ошибок, просто нетничего не делать)