Хочу начать с того, что мне жутко надоели презентации со стандартным лейаутом: сверху шапка с темой, потом набор пунктов, снизу футер ну и справа и/или по центру картинка может какая-то или диаграмма.

Скучно!

Где же креатиффность? Неужели не хочется не просто раскрыть свою тему, а сделать это так, чтоб даже тем, кому не интересна тема, будут заинтересованны подачей материала? Блин, мы ж веб-девелоперы, так почему же мы создаем презентации в левых программах, а не там, где мы лучше всех?

Давненько я уже не писал продолжение сериала о новых свойствах CSS3. Пора исправить этот недочет. Сегодня мы рассмотрим такой эффект как css transform. Как понятно из названия он позволят трансформировать наш объект. Какие именно трансформации нам доступны мы посмотрим на конкретных примерах, что бы не гонять зря воздух. Но напишу небольшое примечание. Так как этот [...]

Давненько я уже не писал продолжение сериала о новых свойствах CSS3. Пора исправить этот недочет. Сегодня мы рассмотрим такой эффект как css transform. Как понятно из названия он позволят трансформировать наш объект. Какие именно трансформации нам доступны мы посмотрим на конкретных примерах, что бы не гонять зря воздух. Но напишу небольшое примечание. Так как этот [...]

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