CSS преобразования

Как работать с CSStransformсвойство

Преобразования позволяют перемещать, вращать, масштабировать и наклонять элементы в 2D или 3D пространстве. Это очень крутая функция CSS, особенно в сочетании с анимацией.

2D преобразования

Вtransformсвойство принимает эти функции:

  • translate()перемещать элементы вокруг
  • rotate()вращать элементы
  • scale()масштабировать элементы по размеру
  • skew()крутить или наклонять элемент
  • matrix()способ выполнения любой из вышеперечисленных операций с использованием матрицы из 6 элементов, менее удобный синтаксис, но менее подробный

У нас также есть специфические для оси функции:

  • translateX()перемещать элементы по оси X
  • translateY()перемещать элементы по оси Y
  • scaleX()масштабировать элементы по размеру по оси X
  • scaleY()масштабировать элементы по размеру по оси Y
  • skewX()чтобы повернуть или наклонить элемент по оси X
  • skewY()чтобы повернуть или наклонить элемент по оси Y

Вот пример преобразования, которое изменяет.boxширина элемента на 2 (дублирование) и высота на 0,5 (уменьшение до половины):

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

transform-originпозволяет нам установить начало координат ((0, 0)координаты) для преобразования, что позволяет изменить центр вращения.

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

Вы можете объединить несколько преобразований, разделив каждую функцию пробелом.

Например:

transform: rotateY(20deg) scaleX(3) translateY(100px);

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

Мы можем пойти еще дальше и перемещать наши элементы в трехмерном пространстве, а не в двухмерном. В 3D мы добавляем еще одну ось Z, которая добавляет глубины визуальным эффектам.

С использованиемperspectiveвы можете указать, как далеко 3D-объект находится от зрителя.

Пример:

.3Delement {
  perspective: 100px;
}

perspective-originопределяет внешний вид позиции зрителя, как мы смотрим на него по осям X и Y.

Теперь мы можем использовать дополнительные функции, управляющие осью Z, которые суммируются с другими преобразованиями осей X и Y:

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

и соответствующие сокращенияtranslate3d(),rotate3d()иscale3d()как сокращение для использованияtranslateX(),translateY()иtranslateZ()функции и так далее.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css:


Tech Wiki Online!