IE's CSS3 Transforms Translator

Автор: Александр Головко Дата публикации: 22.04.2011

CSS3 свойство transform, позволяет повернуть блок на заданный угол, а также изменить его масштаб. Подробнее об этом можно почитать в статье Текст под углом.

Проблема в том, что IE6-8 не понимают это свойство и специально для парнокопытных приходится использовать фильтр Matrix. При этом тебе придется вручную расчитать параметры трансформационной матрицы… Или не придется. Если ты знаешь о сервисе IE's CSS3 Transforms Translator.

сервис IE's CSS3 Transforms Translator

IE's CSS3 Transforms Translator — удобный автоматизированный сервис принимающий параметры трансформируемого блока (ширину, высоту, угол желаемого поворота, смещение и масштабный коэффициент) и выдающий на выходе готовый кусок CSS для нормальных браузеров и для IE6-8.

Также очень порадовали наглядные подсказки-пояснения с рисунками, помогающие сориентироваться в параметрах трансформации.

Кроме всего прочего, после нажатия кнопки "Translate to IE Matrix" (которая, собственно используется для генерации итогового CSS), отображается картинка на которой нарисован исходный блок и то, что с ним случится после трансформации. Очень удобно — сразу видно, верно ли задал параметры.