CSS 3D Трансформації
CSS 3D Трансформації
CSS також підтримує 3D-трансформації.
Наведіть курсор миші на елементи нижче, щоб побачити різницю між 2D та 3D трансформаціями:
В цьому розділі ви дізнаєтесь про наступні властивості CSS:
transform
Підтримка браузерами
Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.
| Властивість | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Спеціальні браузерні префікси
Деяким старим браузерам потрібні спеціальні префікси (-webkit-) для розуміння властивостей 3D-трансформацій:
Приклад
#myDiv {
-webkit-transform: rotateY(130deg); /* Safari до 9.0 */
transform: rotateY(130deg); /* Стандартний синтаксис */
}
Спробуйте самі »
CSS Методи 3D Трансформацій
За допомогою CSS властивості transform ви можете використовувати наступні методи 3D трансформації:
rotateX()rotateY()rotateZ()
Rotate (в перекладі з анг.) - Поворот, обертання.
Метод rotateX()
Метод rotateX() обертає елемент навколо своєї осі X в заданому градусі:
Метод rotateY()
Метод rotateY() обертає елемент навколо своєї осі Y в заданому градусі:
Метод rotateZ()
Метод rotateZ() обертає елемент навколо своєї осі Z в заданому градусі:
Перевірте себе за допомогою вправ!
CSS Властивості 3D-трансформації
В наступній таблиці перераховані всі властивості 3D-трансформації:
| Властивість | Опис |
|---|---|
| transform | Застосовує 2D або 3D трансформацію до елементу |
| transform-origin | Дозволяє змінити положення трансформованих елементів |
| transform-style | Визначає, як вкладені елементи відображаються в тримірному (3D) просторі |
| perspective | Визначає перспективу перегляду 3D-елементів. |
| perspective-origin | Визначає нижню позицію 3D-елементів |
| backface-visibility | Визначає, чи повинен елемент бути видимим, якщо він не повернутий до екрану |
CSS Методи 3D трансформації
| Функція | Опис |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Визначає 3D трансформацію, використовуючи матрицю 4x4 із 16 значень |
| translate3d(x,y,z) | Визначає 3D переміщення |
| translateX(x) | Визначає 3D-переміщення, використовуючи лише значення для осі X |
| translateY(y) | Визначає 3D-переміщення, використовуючи лише значення для осі Y |
| translateZ(z) | Визначає 3D-переміщення, використовуючи лише значення для осі Z |
| scale3d(x,y,z) | Визначає розмір 3D трансформації |
| scaleX(x) | Визначає розмір 3D трансформації, застосовуючи значення вздовж осі X |
| scaleY(y) | Визначає розмір 3D трансформації, застосовуючи значення вздовж осі Y |
| scaleZ(z) | Визначає розмір 3D трансформації, застосовуючи значення вздовж осі Z |
| rotate3d(x,y,z,angle) | Визначає 3D поворот |
| rotateX(angle) | Визначає 3D поворот вздовж осі X |
| rotateY(angle) | Визначає 3D поворот вздовж осі Y |
| rotateZ(angle) | Визначає 3D поворот вздовж осі Y |
| perspective(n) | Визначає вигляд в перспективі для 3D трансформованого елемента |
