Властивість CSS transform
Властивість transform з відповідними префіксами для кроссбраузерності:
Існує кілька функцій трансформації, для кожної з яких використовуються свої візуальні ефекти. Зверніть увагу, фактичний простір на сторінці, що займається елементом, залишається таким самим, як і до трансформації.
Повертає елемент за годинниковою стрілкою від поточної позиції (або щодо точки трансформації, задається властивістю transform-origin).
Впливає розмір елемента. Ці значення, що масштабуються, є "безрозмірними", по суті будучи множниками. Для вказаного вище синтаксису, якщо ви використовуєте одне значення, то елемент розтягнеться в обох напрямках. Отже, scale(2) означає: "зроби елемент удвічі більше". Якщо використовувати два параметри, перший параметр "розтягує" елемент по горизонталі, другий - по вертикалі. Або ви можете бути більш конкретним:
Нахиляє елемент. Як перетворити прямокутник на паралелограм.
Тут не існує укороченої функції, використовуйте дві наведені вище функції.
Зміщує елемент вгору або вниз. Чому, в такому разі, не використовувати top/left/bottom/right? Виходячи з підтримки браузерами, краще використовувати звичайне позиціонування, проте для переходів та анімації краще використовувати transform. Як бонус, translate використовує апаратне прискорення.
Обидва значення – це відстань, наприклад 10px або 2.4em. Перший параметр зрушує елемент праворуч (негативне - вліво). Друге значення зсуває елемент вниз (негативне вгору). Ви можете бути більш конкретним:
Функція матриця перетвореньможе бути використана для поєднання всіх трансформацій в одне. Можна розглядати, як укорочений синтаксис для всіх функцій, проте погано віриться, що його реально написати від руки. Існують інструменти, такі як TheMatrixResolutions, які можуть сконвертувати групу трансформацій у просту декларацію matrix. Очевидно в деяких ситуаціях це сприятиме зменшення розміру файлу, але така мікро оптимізація не варто витраченого на неї часу.
Такого виду правило:
Може бути записано так:
Стаття на цю тему написана простою мовою: htmlbook.ru/blog/matritsa-preobrazovanii
3D Трансформації
Більшість наведених вище властивостей мають 3D версії:
Третє значення translate3d або значення translateZ переміщає елемент до спостерігача, негативне - від спостерігача.
Третє значення в scale3d або значення в scaleZ впливає масштабування вздовж осі Z
rotateX і rotateY будуть обертати елемент у 3D просторі навколо соотв-х осей. rotate3d дозволяє вказати точку в тривимірному просторі щодо якої відбудеться поворот.
Спосіб програмного опису 3D трансформації у 4Х4 сітці. Або "matrix3d задає тривимірне перетворення як однорідну матрицю розміром 4?4 з шістнадцятьма значеннями в порядку стовпців".