Css Transform кросбраузерність

Властивість 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

No related posts.

Comments are closed.