Css transform дозволяє трансформувати елементи, в тому числі в тривимірному просторі.
Використовуючи властивість transform можна задавати елементу одну і більше функцій для трансформації. Всі функції можна знайти тут: Transform Functions
Можливі значення: none або функції трансформацій через пробіл.
Важливо пам'ятати, що функції застосовуються в тій послідовності, в якій записані, і попередні функції можуть впливати на наступні. Тобто рядки
дадуть абсолютно різний результат, а строчка:
поверне об'єкт на 90 градусів, тому що обидві функції будуть виконані послідовно.
Transform-origin
Властивість визначає центр трансформації.
Можливі значення: відстані в пікселях або відсотках або ключові слова (left. Center. Right. Top. Bottom).
Початкове значення: 50% 50% - центр елемента.
Координати відраховуються від верхнього лівого кута елементу. Якщо задано тільки одне значення, друге приймає значення center. Якщо задано два значення, третє приймає значення 0.
Transform-style
Визначає підтримку 3D всередині трансформованого елемента.
flat - трансформований елемент плоский preserve-3d - трансформований елемент має внутрішній об'єм
Наступні властивості можуть перекривати дію transform-style: preserve-3d; і робити відображення елемента плоским незалежно від значення transform-style:
overflow з будь-яким значенням крім visible opacity з будь-яким значенням крім 1 (блокує тривимірність, якщо заданий обгортці трансформованого об'єкта, тобто рівнем вище, ніж transform-style: preserve-3d ;. На одному рівні вони не заважають один одному) так було на момент написання статті, зараз прозорість робить тривимірний елемент плоским. filter з будь-яким значенням крім none
Perspective
Властивість визначає глибину сцени. Чим менше значення, тим більше витягнута сцена в бік глядача. Здається батькові трансформованих елементів.
Можливі значення: none або довжина в пікселях.
Perspective-origin
Відповідає за розташування точки, від якої відраховується перспектива. По суті, задається положення глядача щодо сцени.
Можливі значення: відстані в пікселях або відсотках або ключові слова (left. Center. Right. Top. Bottom).
Backface-visibility
Визначає видимість заднього боку об'єкта.
Можливі значення: visible - об'єкт видно завжди, незалежно від того, яким боком повернуть (значення за замовчуванням). hidden - приховувати об'єкт, якщо він повернуть «спиною».