Css Transform Кроссбраузерно
|
Добавлено: natali2306 | 15.07.2011 |
Современные браузеры уже довольно хорошо понимают это свойство. В них решение выглядит примерно так:
#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/ (Платный профессиональный хостинг) — и информацию об авторе.Смотрите также
Сколько будет стоить обслуживание, переделка сайта? Квалифицированный ответ
Статья про дизайн-студию Webinvite
Изучаем Основные Понятия И Определения. Веб-Программирование
В последнее время, путешествуя по «Всемирной паутине», можно встретить все более и более интересные и в то же время сложные проекты. Теперь уже не модно иметь сайт, который бы просто хранил информацию. Современные сайты проводят опросы, что–нибудь вычисляют, выдают определенные формы для заполнения, в общем, взаимодействуют с пользователем.