CSS 2D Трансформації

CSS 2D Трансформації

CSS-трансформації (перетворення) дозволяють переміщувати, обертати, масштабувати та нахиляти елементи.

Наведіть курсор миші на елемент нижче, щоб побачити 2D-трансформацію:

В цьому розділі ви дізнаєтесь про наступні CSS властивості:

• transform

Підтримка браузерами

Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.

Спеціальні браузерні префікси

Деяким старим браузерам потрібні спеціальні префікси (-ms- або -webkit-) для розуміння властивостей 2D-трансформації:

CSS Методи 2D трансформацій

За допомогою CSS властивості transform ви можете використовувати наступні методи 2D-трансформації:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

Метод translate()

Метод translate() переміщує елемент із його поточної позиції (відповідно до параметрів, вказаними для осі X та осі Y).

В наступному прикладі елемент <div> переміщується на 50 пікселів праворуч і на 100 пікселів нижче його поточної позиції:

Метод rotate()

Метод rotate() обертає елемент за годинниковою або проти годинникової стрілки відповідно заданому градусу.

В наступному прикладі елемент <div> повертається за годинниковою стрілкою на 20 градусів:

Використання негативних значень буде обертати елемент проти годинникової стрілки.

В наступному прикладі елемент <div> повертається проти годинникової стрілки на 20 градусів:

Метод scale()

Метод scale() збільшує або зменшує розмір елемента (відповідно до параметрів, вказаними для ширини та висоти).

В наступному прикладі елемент <div> збільшується в два рази у порівнянні з його початковою шириною та в три рази у порівнянні з його початковою висотою:

В наступному прикладі елемент <div> зменшується до половини його початкової ширини та висоти:

Метод scaleX()

Метод scaleX() збільшує або зменшує ширину елемента.

В наступному прикладі елемент <div> збільшується в два рази у порівнянні з його початковою шириною:

В наступному прикладі елемент <div> зменшується до половини його початкової ширини:

Метод scaleY()

Метод scaleY() збільшує або зменшує висоту елемента.

В наступному прикладі елемент <div> збільшується в три рази від його початкової висоти:

В наступному прикладі елемент <div> зменшується до половини його початкової висоти:

Метод skewX()

Метод skewX() нахиляє елемент вздовж осі X на заданий кут.

Наступний приклад нахиляє елемент <div> на 20 градусів по осі X:

Метод skewY()

Метод skewY() нахиляє елемент вздовж осі Y на заданий кут.

Наступний приклад нахиляє елемент <div> на 20 градусів вздовж осі Y:

Метод skew()

Метод skew() нахиляє елемент вздовж осі X та Y на задані кути.

В наступному прикладі елемент <div> нахиляється на 20 градусів по осі X та на 10 градусів по осі Y:

Якщо другий параметр не вказано, він має нульове значення. Наступний приклад нахиляє елемент <div> на 20 градусів вздовж осі X:

Метод matrix()

Метод matrix() об’єднує всі методи 2D-трансформацій в один.

Метод matrix() приймає шість параметрів, що містять математичні функції, які дозволяють обертати, масштабувати, переміщувати (переводити) та нахиляти елементи.

Параметри по порядку слідування: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

CSS Властивості трансформації

В наступній таблиці перераховані всі властивості 2D-трансформації:

CSS 2D Методи трансформації