Мы на ZURB’е очень любим CSS. Мы любим его так сильно, что используем некоторые его возможности, которые еще только появятся во всех браузерах (CSS3). Прошло примерно 10 лет, и наконец-то CSS3 увидел свет в конце туннеля, в виде новых браузеров, таких как Firefox и Safari, внедряющих его поддержку. Одна из наших любимых возможностей CSS3, это [...]

Вот очень интересный сайтик, который, я надеюсь, заменит все хаки. =)
http://css3pie.com/

Сегодня, в продолжение экспериментов с 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-описание скопировать куда-нибудь к себе.