Перетворити - CSS-хитрощі

Anonim

transformВластивість дозволяє візуально маніпулювати елемент з допомогою перекосу, повороту, перекладу, або масштабування:

.element ( width: 20px; height: 20px; transform: scale(20); )

Навіть із заявленою висотою та шириною, цей елемент тепер буде масштабовано до двадцяти разів від початкового розміру:

Див. Пояснення Pen Transform від CSS-Tricks (@ css-tricks) на CodePen.

Надавши цій функції два значення, ви розтягнете її горизонтально на перше і вертикально на друге. У прикладі нижче елемент тепер буде вдвічі шириною, але вдвічі більшим за висоту вихідного елемента:

.element ( transform: scale(2, .5); )

Або ви можете бути більш конкретним, не використовуючи скорочену функцію:

transform: scaleX(2); transform: scaleY(.5);

Але scale()це лише одна з багатьох доступних функцій перетворення:

Цінності

  • scale(): Впливає на розмір елемента. Це також відноситься і до font-size, padding, heightі widthелемент, теж. Це також скорочена функція для функцій scaleXі scaleY.
  • skewX()і skewY(): нахил елемента вліво або вправо, як перетворення прямокутника в паралелограм. skew()- це скорочення, що поєднує skewX()і skewYприймаючи обидва значення.
  • translate(): Переміщує елемент убік або вгору-вниз.
  • rotate(): Обертає елемент за годинниковою стрілкою з поточного положення.
  • matrix(): Функція, яка, ймовірно, не призначена для написання від руки, але поєднує всі перетворення в одне.
  • perspective(): Не впливає на сам елемент, але впливає на перетворення тривимірних перетворень нащадкових елементів, дозволяючи всім їм мати послідовну перспективу глибини.

Косий

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Функції skewXта skewYперетворення нахиляють елемент так чи інакше. Пам'ятайте: не існує скороченої властивості для перекосу елемента, тому вам потрібно буде використовувати обидві функції. У наведеному нижче прикладі ми можемо перекосити квадрат 100px x 100px ліворуч та праворуч за допомогою skewX:

Див. Пояснення Pen Transform від CSS-Tricks (@ css-tricks) на CodePen.

Хоча в цьому прикладі ми можемо перекосити елемент вертикально за допомогою skewY:

Див. Пояснення Pen Transform від CSS-Tricks (@ css-tricks) на CodePen.

Тепер давайте використаємо skew()для поєднання двох:

Перегляньте
скорочену властивість Pen skew () від CSS-Tricks (@ css-tricks)
на CodePen.

Обертати

.element ( transform: rotate(25deg); )

Це обертає елемент за годинниковою стрілкою з початкового положення, тоді як негативне значення обертає його в протилежному напрямку. Ось простий анімований приклад, коли квадрат продовжує обертатися на 360 градусів кожні три секунди:

Див. Пояснення Pen Transform від CSS-Tricks (@ css-tricks) на CodePen.

Ми також можемо використовувати rotateX, rotateYі rotateZфункцію, наприклад , так:

Див. Пояснення Pen Transform від CSS-Tricks (@ css-tricks) на CodePen.

Перекласти

.element ( transform: translate(20px, 10px); )

Ця функція перетворення переміщує елемент вбік або вгору і вниз. Чому б просто не використовувати верхній / лівий / нижній / правий? Ну, іноді це трохи заплутано. Я б подумав про них як про макет / позиціонування (вони все одно мають кращу підтримку браузера), і це як спосіб переміщення цих речей як частини переходу або анімації.

Ці значення будуть будь-якими значеннями довжини, наприклад 10px або 2.4em. Одне значення перемістить елемент вправо (від’ємні значення вліво). Якщо надано друге значення, це друге значення перемістить його вниз (негативні значення вгору). Або ви можете отримати конкретне:

transform: translateX(value); transform: translateY(value);

Важливо зазначити, що використання елемента transformне призведе до обтікання інших елементів навколо нього. Використовуючи translateфункцію нижче та виштовхуючи зелений квадрат із вихідного положення, ми помітимо, як оточуючий текст залишатиметься фіксованим на місці, ніби квадрат є блочним елементом:

Див. Пояснення Pen Transform від CSS-Tricks (@ css-tricks) на CodePen.

Варто також зазначити, що translateапаратне прискорення, якщо ви хочете анімувати це властивість, на відміну від position: absolute.

Кілька значень

За допомогою списку, розділеного пробілами, ви можете додати до transformвластивості кілька значень :

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

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

Матриця

Функцію matrixперетворення можна використовувати для об'єднання всіх перетворень в одне. Це трохи нагадує скорочення скорочення, лише я не вірю, що воно насправді призначене для написання від руки. Є такі інструменти, як The Matrix Resolutions, які можуть перетворити групу перетворень в одне оголошення матриці. Можливо, в деяких ситуаціях це може зменшити розмір файлу, хоча мікрофункціональна оптимізація, непривітна до авторів, швидше за все, не варта вашого часу.

Для допитливих це:

rotate(45deg) translate(24px, 25px)

також може бути представлений як:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D-перетворення

Більшість із зазначених властивостей мають їх тривимірні версії.

translate3d(x, y, z) translateZ(z)

Третє значення в translate3dабо значення в translateZпереміщує елемент до переглядача, негативні значення подалі.

scale3d(sx, sy, sz) scaleZ(sz)

Третє значення в scale3dабо значення в scaleZвпливає на масштабування вздовж осі z (наприклад, уявна лінія, що виходить прямо з екрану).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXі rotateYобертатиме елемент у тривимірному просторі навколо цих осей. rotate3dдозволяє вказати точку в тривимірному просторі, в якій потрібно обертати елемент навколо.

matrix3d(… )

Шлях програмного опису 3D-перетворення в сітці 4 × 4. Ніхто ніколи не напише жодного з них, ніколи.

perspective(value)

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

Більше інформації

  • Документи MDN щодо перетворення та використання.
  • Документація Девіда Десандро про 3D-трансформації
  • Surfin 'Safari: 3D-перетворення
  • Специфікація W3C щодо перетворень CSS3
  • Вступ до перетворень CSS 3D

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

2D-перетворення

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який 3.1+ 3,5+ 10,5+ 9+ 4.1+ Принаймні 4

3D-перетворення

Chrome Сафарі Firefox Опера IE Android iOS
10+ 4+ 12+ жоден 10+ 4.1+ 5+

Префікси постачальників

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )