Всем привет.
Сегодня мы кратко расскажем о преобразованиях.
Преобразования очень похожи на переходы, в том, что они предоставляют еще один
вариант для изменения внешнего вида элементов, которые находятся на нашей странице.
Таким образом, мы можем изменить вещи как в двухмерной манере, так и
в трехмерной манере, когда люди смотрят на ваш сайт.
Итак, давайте посмотрим на некоторые из вариантов двухмерного преобразования.
Мы поговорим о переводе, вращении, масштабировании,
перекосе и матрице, и о том, как каждый из них может работать в вашем CSS3.
Первый вариант, который я покажу вам, это перевод.
Что будет делать перевод, так это то, что вы можете дать ему два значения, я назвал их x
и y, и в зависимости от этих значений
вы можете переместить элемент влево и вправо или вверх и вниз.
Если x является положительным,
вы двигаетесь вправо, если отрицательное, вы перемещаетесь влево.
С y, если это положительно, вы двигаетесь вниз, и если это отрицательно, вы двигаетесь вверх.
Итак, давайте посмотрим на фактический пример, чтобы сделать его немного более ясным.
Вот, у меня есть симпатичный синий элемент.
И я собираюсь сказать, что хочу перевести его, 100 и 75.
Так что вы ожидаете увидеть, как он сместится вправо и немного вниз.
Так что, опять же, трудно сказать, когда все идет вверх и вниз.
Но если посмотреть на маржу, мы почти эффективно увеличили маржу.
Следующим параметром является поворот.
Когда вы вращаете что-то, вы вращаетесь, или
мне нравится думать об этом как о вращающемся элементе, определенное количество градусов.
Ты не видишь спина.
Вы просто видите результат или как он будет выглядеть в конце.
Итак, у меня есть еще один элемент, и я собираюсь сказать, чтобы он поворачивался на 30 градусов.
Так что отсюда, сюда.
Теперь это действительно важно, чтобы не забудьте поставить град.
Если вы просто поместите 30, многие браузеры не будут иметь этой работы.
На самом деле, большинство из них не будет.
Так что убедитесь, что вы дали ему степени, которые вы хотите, чтобы он повернул, какое-то число, 30
, 90, 80, а затем используйте степень.
Далее, давайте поговорим о масштабе.
И масштаб - это просто причудливый способ сказать: давайте сделаем его шире или выше.
Опять же, вы даете ему два числа, и
вот сколько вы хотите изменить ширину и высоту элемента.
Так что здесь у меня есть меньший блок, и
я решил, что хочу сделать его в два раза шире и в три раза выше.
Вот новый элемент после масштабирования преобразования.
Для меня очень трудно объяснить, что он делает, и это еще
труднее сделать, потому что я всегда забываю свои левые и права, когда смотрю на камеру.
Итак, опять же, вы захотите поиграть с этим и
посмотреть на некоторые из примеров.
То, что вы делаете, это вы вращаете элемент на определенное количество градусов вокруг
угла x и определенное количество градусов вокруг угла y.
Итак, я покажу вам перекос, 30 градусов на 15 градусов.
Ты начинаешь здесь, и в конечном итоге ты выглядишь под очень странным углом.
И снова очень трудно показать вам это, когда я смотрю на экран, так что
я надеюсь, что вы напечатаете это и немного поиграете с ним.
Следующим и последним вариантом является матрица.
И когда вы используете матрицу,
вы можете объединить все методы 2D преобразования в одну команду одновременно.
Я никогда не использую это, потому что я нахожу слишком запутанным, чтобы помнить
, какая шкала, какая вращается, какая из них перекос.
Поэтому, если вы не чувствуете себя действительно уверенным в своем CSS3, я бы избегал
использования матрицы и продолжал использовать каждый из других индивидуальных преобразований по одному за раз.
Так что другие, о которых мы только что говорили, были двумерными преобразованиями.
Мы также можем делать трехмерные преобразования, и
они очень похожи на те, о которых мы только что говорили.
Так, например, с поворотом, теперь вместо того, чтобы просто вращаться вдоль
оси x или y, мы также можем вращаться вокруг размера z.
Поэтому, если вы хотите использовать 3D поворот, ваши параметры теперь являются трансформацией: повернуть,
сколько градусов, RotaTeX, RotateZ,
или вы можете сказать rotate3D и дать ему номера по каждому отдельному измерению.
Я редко использую 3D размеры.
Но у нас есть варианты.
У нас есть поворот, у нас есть масштаб, и у нас есть перевод.
И они действительно могут делать некоторые действительно интересные вещи с тем, как вы хотите, чтобы ваши
элементы выглядели.
Когда приходит время использовать преобразования, есть несколько вещей, о которых нужно думать.
Обычно, когда вы используете преобразования, вы собираетесь использовать их с изменениями состояния.
Если вы помните, это означает, что преобразование может произойти, когда вы делаете на
наведении, на фокусе или на активном.
Если вы действительно просто пытаетесь изменить, как выглядит элемент прямо с самого
начала и оставить его таким образом, вы можете подумать о том, чтобы просто делать снимки
и возиться с изображениями и делать вещи в автономном режиме.
Это быстрее, и он не использует столько пропускной способности.
Тем не менее, это классный способ играть с вещами и
получить уверенность с вашим CSS.
Конечно, с таким количеством вещей, которые мы изучали в этом классе, важно
помнить, что вам часто понадобятся префиксы браузера для работы преобразований.
Таким образом, еще один инструмент в вашем поясе инструментов для
изучения того, как делать что-то захватывающее с вашей страницей.
Я знаю, что я не сделал свой обычный пример здесь, но
следующее видео покажет пример использования переходов, преобразований и
некоторых других вещей, которые мы изучали все это время.
Надеюсь, вы взглянете на это и
почувствуете себя немного более уверенно в том, что мы только что узнали с помощью преобразований.
Удачи.