Главная страница » Веб-дизайн, создание сайтов » Веб-дизайн » Css Transform Кроссбраузерно

Css Transform Кроссбраузерно

Добавлено: natali2306 | 15.07.2011 Просмотров: 35048 Слов: 281 Рейтинг: 2.20 --Голосовать-- 0 1 2 3 4 5

Свойство 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-transf

Об авторе

http://demos.aimweb.name/

---

Условия перепечатки

При репосте статьи "Css Transform Кроссбраузерно", пожалуйста укажите источник - сайт http://www.iphosting.ru/ (Платный профессиональный хостинг) — и информацию об авторе.

Смотрите также

О веб-дизайне и тенденциях его развития.
Что влияет на развитие веб-дизайна, и какие существуют прогнозы о его развитии в будущем.

Разработка Web-Ресурса: Что Важнее - Оформление Или Же Структура
Создание веб-сайта – это не только лишь разработка хорошего дизайна, а тщательно продуманная организационная структура, облегчающая поиск информации, дает возможность без труда её изменить и т.д.