Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «moztransform»
JS: Меняем css-свойство transform на примере функции matrix 2010-07-13 10:33:30
... : style.MozTransform = 'matrix(1, 0 ...
+ развернуть текст сохранённая копия
Сегодня, в продолжение экспериментов с HTML5 и CSS3, я решил разобраться со свойством transform. На самом деле, я уже разбирался с этим свойством на примере функции rotate. Тогда я писал о CSS, а вот изменять его с помощью JS-кода не пробовал.
Итак, я стал изучать функцию matrix. На вход ей подается аж 6 параметров! Естественно понять это обычным человеческим мозгом довольно трудно. Поэтому я решил сделать инструмент для изучения функции matrix.
На пути к созданию этого инструмента мне встретились некоторые затруднения. Например, как с помощью JavaScript менять свойство transform? Также как и при описании в CSS, в JS-движках предусмотрены специальные свойства стандартного style. Вот пример установки этих свойств:
style.MozTransform = 'matrix(1, 0, 0, 1, 1em, 1em)'; // Gecko (Firefox) style.WebkitTransform = 'matrix(1, 0, 0, 1, 10, 10)'; // Webkit (Chrome, Safari) style.OTransform = 'matrix(1, 0, 0, 1, 10, 10)'; // Presto (Opera) style.transform = 'matrix(1, 0, 0, 1, 10, 10)'; // Все остальные, на всякий случай.
Но самое интересное, что если для Webkit и Gecko эту информацию можно найти, то для Presto (Opera) я обыскался. CSS описание есть, а вот для обращений из js нет примеров. Получается я первый! =)
Комментарии, вопросы, поправки и пожелания - приветствуются.
Будет странно не дать ссылки на чтение о transform: Спецификация w3c -moz-transform -webkit-transform -o-transform частично можно трансформации делать даже в ie
старенькая статейка на русском языке
UPD: Добавил в инструмент другие функции: rotate, scale, skew, translate. С ними можно поиграть, а получившееся CSS-описание скопировать куда-нибудь к себе.
Тэги: css3, firefox, html5, javascript, matrix, moztransform, opera, otransform, transform, webkit, webkittransform
Главная / Главные темы / Тэг «moztransform»
|
Взлеты Топ 5
Падения Топ 5
|