Здравствуйте!
В этом видео я расскажу вам про CSS-преобразования.
Итак, на текущий момент нам доступны четыре вида преобразования:
это перемещение, масштабирование, вращение и наклон.
Далее я расскажу о каждом поподробней.
Для того чтобы создать перемещение, нужно использовать свойство transform,
и качестве значения указывается тип трансформации,
или иногда еще называют функцией трансформации.
И в круглых скобочках указывается значение.
У трансформации есть одна важная особенность: что при применении
какой-то трансформации происходит изменение объекта,
но физически объект находится в этом же месте.
То есть у нас, например, Бокс 2 увеличивается, уменьшается,
но это увеличение никак не влияет на окружающие элементы.
Первый вид преобразований — это перемещение.
Для того чтобы задать перемещение, нужно использовать функцию translate.
Ей передается два аргумента — это перемещение по оси x и по оси y.
Ось x направлена в правую сторону, ось y направлена вниз.
Значения можно задавать как положительные, так и отрицательные.
В случае если не нужно задавать перемещение по оси y,
то значение можно устанавливать в 0.
Так, например, сделано с зеленым и красным блоком.
Если задавать отрицательные значения,
то блок движется в противоположном направлении.
То есть синий блок, который находится в левом верхнем углу — у него указаны
отрицательные значения, и он передвинулся влево.
Значения также можно задавать в процентах.
В этом случае перемещение будет рассчитываться относительно размеров
блока, то есть перемещение по оси x считается относительно ширины,
перемещение по оси y, в процентах, считается от высоты.
И в браузере это выглядит вот так, то есть перемещение по
оси x на 100 % перемещается вправо на 200px, потому что ширина блока — 200px.
Ну и аналогично по оси y, указав 100 %,
мы перемещаемся вниз на 100px, потому что высота блока — 100px.
Также можно указывать перемещение только по одной из осей, например,
translateX перемещает по оси x, translateY перемещает только по оси y,
для того чтобы не писать нулевые значения.
В браузере это выглядит вот так, то есть, задавая функцию translateX,
например 100 %, перемещение происходит только по оси x.
И аналогично с перемещением по оси y, указав функцию translateY.
Следующий вид преобразования — это масштабирование.
Оно задается при помощи функции scale,
и значение указывается без каких-либо единиц измерения.
По умолчанию значение установлено в 1,
если указывать значение больше 1, то элемент увеличивается.
Если значение указывать меньше единицы, то элемент уменьшается.
Например, синему блоку мы задали увеличение 1.5.
Это означает, что элемент увеличится на 50 %.
Если мы укажем значение 0.5, то элемент уменьшится на 50 % от исходного размера.
И вот так это будет выглядеть в браузере.
У функции scale можно указать как один аргумент, так и два аргумента.
Если мы указываем два аргумента с разными значениями, то сжатие или,
наоборот, растяжение происходит по оси x или по оси y.
Вот, например, у синего блока мы указали по оси x никаких изменений не применять,
а по оси y — увеличить на 50 %.
Также можно указывать отдельные функции для опеределенной оси,
то есть scaleX масштабирует по оси x, scaleY масштабирует по оси y.
И в браузере этот код будет выглядеть вот так,
то есть у нас синий блок расширился по вертикали,
зеленый блок сжался по горизонтали, и красный блок сжался по вертикали.
Также функцией scale можно указывать отрицательные значения.
В этом случае происходит переворот элемента,
то есть элемент сначала сжимается, затем он переворачивается,
в зависимости от того, по какой оси указано сжатие отрицательное.
Например, у синего бокса указан (1, −1), то есть перевернуть по оси x,
у зеленого — перевернуть по оси x, и у красного указано только одно значение,
поэтому уменьшение и переворот происходят по обоим осям.
Также чем меньше значение отрицательное,
тем сильнее увеличен блок после переворачивания.
Следующий вид преобразования — это вращение.
Вращение задается при помощи функции rotate — в качестве аргумента передается
угол, на который нужно повернуть элемент.
Если указывать положительное значение, то элемент поворачивается по часовой стрелке.
Если указывать отрицательное значение,
то элемент поворачивается против часовой стрелки.
Также значения можно указывать в других единицах измерения,
такие как количество поворотов, градусы или радианы.
В данном случае мы указали значение 1.5turn, то есть полтора оборота.
Последний вид преобразований — это наклоны.
Наклон делается при помощи функции skew,
у нее передается два аргумента: наклон по оси x и наклон по оси y.
Также существуют функции для наклона только по одной определенной оси,
например skewY и skewX, то есть наклон по оси x и наклон по оси y.
Значение задается в градусах.
У нас есть три бокса: красный, зеленый, синий.
Красному мы задаем наклон только по оси x, зеленому задаем наклон только по оси y,
и синему задаем наклон как по оси x, так и по оси y.
И выглядит следующим образом.
Если мы наклоняем красный блок,
то у нас наклон происходит по часовой стрелке на 45 % по оси x.
Зеленый наклоняется по оси y,
и синий наклоняется в двух направлениях одновременно.
В этом видео вы узнали про четыре основных преобразования, которые существуют в CSS.
В следующем видео я расскажу вам о том,
как применять множественные преобразования.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
