Совет AtoZ CSS: использование преобразований и матриц по оси Y

Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст на rotateYздесь .

Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов просто недостаточно, поэтому в этой статье мы добавили краткий совет по преобразованию оси Y и матрицам.

Y для преобразования оси Y и матриц

Мы можем выполнять всевозможные интересные преобразования для элементов вдоль различных осей. В этом совете мы предоставим краткое изложение всех общих опций, а затем рассмотрим менее известное значение transformtransformmatrix()

transform

Поскольку исходный скринкаст фокусировался на rotateY()

Мы можем применить следующие преобразования:

• transform: translateY(100px)
• transform: rotateY(45deg)
• transform: scaleY(1.5)
• transform: skewY(30deg)

Все эти значения ограничены осью Y и могут использоваться для сообщения намерения, что выполняется единственное преобразование вдоль этой единственной оси.

rotateY() При выполнении любого вида трехмерного transformtransform-style:preserve-3d

Многократное transform

Если вы хотите объединить несколько значений transform Следующий фрагмент кода объединяет перевод с skew

 .element {
  transform: translateY(50px) skew(30deg);
}

Это все хорошо, но если вы устанавливаете несколько transformtransform

Существует немного более сложный, но гораздо более мощный метод настройки transformmatrix()

Установить комплексное transformmatrix()

matrix()scaleskewtranslate

 .element {
  transform: matrix(a, b, c, d, e, f);
}

В основе этой техники лежит довольно сложная математика, которая всегда мешала моему мозгу пытаться понять. Поэтому вместо того, чтобы пытаться объяснить математические матрицы, точечные произведения и векторы, давайте посмотрим, к чему относится каждый из параметров в matrix()

Если вы хотите полностью погрузиться в математику, прочитайте эту статью от User Agent Man .

В приведенном выше фрагменте я пометил каждый аргумент функции матрицы другой буквой от af

ad

bc

Наконец, ef

Одна вещь, которая делает всю эту matrix() Длина — это такие значения, как 100px30deg

Чтобы продемонстрировать это, приведенный ниже фрагмент дает два идентичных визуальных результата; один, использующий многократное transform

 .one {
  transform: scale(1.5, 1.5) skew(10deg, 10deg) translate(100px, -50px);
}
.two {
  transform: matrix(1.5, 0.26449, 0.26449, 1.5, 136.775, -48.551);
}

Вот кодекс приведенного выше фрагмента, чтобы вы могли увидеть идентичный результат: