Свойство CSS transform позволяет манипулировать блоками, поворачивая, искажая или масштабируя их без использования Flash или JavaScript. К сожалению, браузер IE 8 и его более ранние версии не поддерживают CSS-трансформации. Но подобного эффекта можно достичь с помощью фильтра Matrix. Данный инструмент проводит преобразование значений CSS3 transform в параметры filter:Matrix, который позволит отобразить результат в IE6-8.

Поддерживаемые css трансформации:

Это объект до трансформации.

А это объект после трансформации.

Шаг 1: Введите значение CSS3 transform

К примеру:

px px

Шаг 2: Получаем кроссбраузерный CSS

Для браузеров, понимающих CSS3:

#transformedObject {
     width:             220px;
     height:            70px;

     -moz-transform:    rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     -o-transform:      rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     -webkit-transform: rotate(15deg)
                         translateX(230px)
                         scale(1.5);
     transform:         rotate(15deg)
                         translateX(230px)
                         scale(1.5);
}

Для IE:

/*
 * Следущие правила написаны специально для IE,
 * их стоит отделить условными комментариями.
 * -ms-filter необходимо писать в одну строку и раньше, чем свойство filter
 */

#transformedObject {

   /* для IE8+ - условие необходимо писать в одну строку */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
   
   /* IE6 и 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.4488887394336025,
            M12=-0.388228567653781,
            M21=0.388228567653781,
            M22=1.4488887394336025,
            SizingMethod='auto expand');


   /*
    * Для корректировки центра трансформации объекта.
    * (из-за разницы работы CSS3 transform и filter:Matrix)
    * Стоит учесть, что эти цифры приблизительные.
    */
   margin-left: 58px; 
   margin-top: -32px;


Error

Основной код написан Zoltan Hawryluk и Zoe Mickley Gillenwater.

Локализция от aimweb.name

rotate( angle)

Поворачивает элементы. Значание angle может быть в градусах (rotate(30deg)) либо в радианах (rotate(1.3rad))

rotate(45deg)

Это объект до трансформации.

Это объект до трансформации.

scale( sx, sy)

Масштабирует HTML элемент. Параметры SX и SY являются числами, где 1 — оригинальный размер, 2 — в два раза больше, 0,5 представляет собой половину размера, и т.д. Стоит отметить, что если SY не указан, то он считается равным SX. Дополнительные функциии: scaleX(sx) — масштабирует только по горизонтали. scaleY(sy) — только о вертикали.

Original scaleX(1.3) scaleY(1.3) scale(0.5, 0.5) scale(-1, 1) scale(1, -1)

skew( x-angle, y-angle)

Искажает объект относительно осей x и y. Если значение y не указано, оно считается равным 0deg

skewX(25deg) skewY(35deg) skew(25deg, 35deg)

Это объект до трансформации.

Это объект до трансформации.

Это объект до трансформации.

Это объект до трансформации.

Это объект до трансформации.

Это объект до трансформации.

translate( tx, ty)

Смещает объект по горизонтали и по вертикали.

translateX(40px) translateY(30px) translate(40px, 30px)

Это объект до трансформации.

Объект после трансформации.

Это объект до трансформации.

Объект после трансформации.

Это объект до трансформации.

Объект после трансформации.

matrix( a, c, b, d, tx, ty)

Одна из самых сложных для понимания функций преобразования.

Эквивалентна фильтру 'Matrix'. Первые четыре значения a, c, b и d, соответствуют первым четырем значениям в фильтре Matrix, M11 , M12 , M21 и M22 . Соответственно,

transform: matrix(1, 2, 3, 4, 0, 0);
Тоже самое что и:
filter: progid:DXImageTransform.Microsoft.Matrix(
         M11=1,
         M12=3,
         M21=2,
         M22=4,
         SizingMethod='auto expand');

Заметим что c и b идут не по порядку. Это из-за разницы в реализации Microsoft и описаний W3C.

Последние два значения, tx и ty — свойства смещения объекта. То есть:

transform: matrix(1, 0, 0, 1, 22px, 33px);

то же самое, что и

transform: translate(22px, 33px);