Властивість CSS3 —CSS transformзастосовується для повороту, збільшення, відображення, нахилу елементів сторінки, дозволяючи добитися вельми несподіваних і привабливих дизайнерських рішень.

Сучасні браузери вже досить добре розуміють цю властивість.В них рішення виглядає приблизно так:

# 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);

}

Але варто пам’ятати й про Internet Explorer, який йде позаду планети всієї в плані нововведень.

Щоб отриматиcss transform кросбраузерністьбез використання яваскрипт варто використовувати генератор властивості css-transform, який робить переклад значеньCSS3 transformв змінні фільтра ms-Matrix.

Це дозволить відобразити результат також і в браузерах IE6-8.

Головна особливість способу — отриманнякросбраузерністьрезультату без використання canvas і js, що досить зручно.

Кінцевий результат буде виглядати так:

# TransformedObject {

width: 300px;

height: 110px;

-Moz-transform: rotate (15deg)

skew (-15deg);

-O-transform: rotate (15deg)

skew (-15deg);

-Webkit-transform: rotate (15deg)

skew (-15deg);

transform: rotate (15deg)

skew (-15deg);

}

А для IE виносимо в окремі стилі наступний код:

/ *

Следущие правила написані спеціально для IE,

* Їх варто відокремити умовними коментарями.

*-Ms-filter необхідно писати в один рядок і раніше, ніж властивість filter

* /

# TransformedObject {

/ * Для IE8 + — умова необхідно писати в один рядок * /

-Ms-filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 1.035276180410083, M12 = — 0.5176380902050409, M21 = 4.440892098500626e-16, M22 = 0.8965754721680537, SizingMethod = ‘auto expand’);

/ * IE6 and 7 * /

filter: progid: DXImageTransform.Microsoft.Matrix (

M11 = 1.035276180410083,

M12 = — 0.5176380902050409,

M21 = 4.440892098500626e-16,

M22 = 0.8965754721680537,

SizingMethod = ‘auto expand’);

/ *

* Для коригування центру трансформації об’єкта.

* Примітка: ці значення приблизні.

* /

margin-left:-37px;

margin-top: 3px;

}

Ка ви можете помітити, перетворення для IE виглядають досить складно.Щоб їх не робити кожен раз, варто скористатися спеціальним інструментом:

код для IE створюється за допомогою генератора властивості css-transform