IPHosting (платный профессиональный хостинг)

Здравствуйте, Гость

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

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

Добавлено: natali2306 | 15.07.2011
Просмотров: 10825
Слов: 281
Рейтинг: 2.20


Свойство 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/ (Платный профессиональный хостинг) — и информацию об авторе.
Смотрите также

Простые Способы Создать Большой Веб-Сайт!
Как? Здесь это... Изобретите свое понятие и идеи. Изображение, чем Вы хотите, чтобы Ваш потенциальный веб-сайт был. К каким клиентам Вы предоставите? Все, что Вы делаете потребности быть к их симпатии.

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