Учебник по преобразованиям CSS

Свойство transform позволяет нам визуально манипулировать элементами, масштабируя, перекашивая, поворачивая или переводя их.

Например:

.element {   
  width: 30px;   
  height: 30px;   
  transform: scale(10); 
}

Несмотря на объявления высоты и ширины, трансформация масштабирует наш элемент в десять раз больше его исходного размера!

Трансформации особенно интересны в сочетании с анимацией.

Функции преобразования

Мы можем использовать следующие функции:

Давайте рассмотрим каждую из них!

Масштаб

Функция scale() — это сокращение для scaleX() и scaleY().

scaleX() изменяет размер элемента вдоль оси x (по горизонтали), а scaleY() — вдоль оси y (по вертикали).

Например, давайте увеличим ширину .element на 2 (удвоим его ширину) и уменьшим его высоту на 0.5 (уменьшим вдвое):

.element {
  transform: scale(2, 0.5);
}

Первый параметр — scaleX(), а второй scaleY().

Перекос

Функция skew() наклоняет элемент влево или вправо. Это также сокращение для skewX() и skewY().

Перекос по оси x (горизонтальный):

transform: skewX(15deg);

Перекос по оси y (вертикальный):

transform: skewY(15deg);

Перекос вдоль обеих осей одновременно:

transform: skew(15deg, 15deg);

Повернуть

Функция rotate() поворачивает элемент по часовой стрелке относительно его исходного положения:

transform: rotate(25deg);

Мы можем использовать отрицательное значение, чтобы повернуть его в противоположном направлении:

transform: rotate(-25deg);

Перевести

Функция translate() перемещает элемент в горизонтальном или вертикальном направлении (относительно его исходного положения):

transform: translate(50px, 10px);

Здесь наш элемент переместится на 50px (вправо) по горизонтальной оси и на 10px (вниз) по вертикальной оси.

Это сокращенное обозначение:

transform: translateX(50px);
transform: translateY(10px);

Чтобы вместо этого переместиться влево или вверх, мы просто используем отрицательные значения.

Мы можем использовать любое допустимое значение длины, например px, em и rem.

Объединение нескольких преобразований

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

transform: rotateY(30deg) scaleX(2) translateX(200px);

3D-трансформации

При 3D-преобразованиях добавляется третья ось «z», которая добавляет измерение глубины.

Следующие дополнительные функции управляют осью Z:

• translateZ()
• rotateZ()
• scaleZ()

Для них у нас есть соответствующие сокращения translate3d(), rotate3d() и scale3d(). Для случаев, когда мы хотим объединить translateX(), translateY() и translateZ().

Перспектива

Свойство перспективы определяет, на каком расстоянии от зрителя находится 3D-объект:

.element {
  perspective: 100px;
}

Меньшее значение приведет к более интенсивному 3D-эффекту, чем большее значение.

Обратите внимание, что при определении perspective для элемента, дочерние элементы получают вид перспективы, а не сам элемент.

Perspective-origin

Свойство perspective-origin определяет, в какой позиции пользователь смотрит на 3D-объект:

.element {
  perspective: 100px;
  perspective-origin: left;
}

Оно позиционирует 3D-объект так, как будто на него смотрят под другим углом.

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Let’s Connect

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen