Join
НАХТМЛ
@nahtml
CSS3
February 2, 2021

② Функции 2D-трансформации transform

Продолжим изучение темы CSS3 - трансформации. Если пропустили прошлую статью, то вот ссылка на неё:

Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.

Допустимые значения:

matrix() — любое число
translate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %
scale(), scaleX(), scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew(), skewX(), skewY() — угол (deg, grad, rad)

ТАБЛИЦА 1. Свойство transform
Структура таблицы следующая: Функция - Описание
  • none - Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
  • matrix(a, c, b, d, x, y) - Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.
    Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает.
    Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз.
    Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо.
    Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает.
    Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево.
    Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
  • translate(x,y) - Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
  • translateX(n) - Сдвигает элемент относительно его обычного положения по оси X.
  • translateY(n) - Сдвигает элемент относительно его обычного положения по оси Y.
  • scale(x,y) - Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
  • scaleX(n) - Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
  • scaleY(n) - Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
  • rotate(угол) - Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
  • skew(x-угол,y-угол) - Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
  • skewX(угол) - Деформирует стороны элемента относительно оси X.
  • skewY(угол) - Деформирует стороны элемента относительно оси Y.
  • initial - Устанавливает значение свойства в значение по умолчанию.
  • inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS
div {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
transform: rotate(360deg);
}

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

📹 ГИФ 1. Примеры функций 2D-трансформации
HTML
<h1>CSS3 2D Transform examples (on <kbd>:hover</kbd>)</h1>
<div class="wrap"><div class="one"><kbd>translateX(20px)</kbd></div></div>
<div class="wrap"><div class="two"><kbd>translateY(-20px)</kbd></div></div>
<div class="wrap"><div class="three"><kbd>translate(-20px, 20px)</kbd></div></div>
<div class="wrap"><div class="four"><kbd>scaleX(-1)</kbd></div></div>
<div class="wrap"><div class="five"><kbd>scaleY(1.2)</kbd></div></div>
<div class="wrap"><div class="six"><kbd>scale(1.2, 0.5)</kbd></div></div>
<div class="wrap"><div class="seven"><kbd>rotate(720deg)</kbd></div></div>
<div class="wrap"><div class="eight"><kbd>skewX(20deg)</kbd></div></div>
<div class="wrap"><div class="nine"><kbd>skewY(-20deg)</kbd></div></div>
<div class="wrap"><div class="ten"><kbd>skew(-20deg, 20deg)</kbd></div></div>
<div class="wrap"><div class="eleven"><kbd>matrix(1.2,0,0.5,1.2,50,0)</kbd></div></div>
CSS
* {box-sizing: border-box;}
body {font-family: 'Playfair Display', serif; margin: 0;text-align: center}
h1 {font-weight: normal;color: #6A5953}
kbd {font-size: 0.9em;display:inline-block;line-height:1.1;}
.wrap {
  display: inline-block;
  margin: 0 40px 2em 0;
  background: rgba(228, 225, 228, .5);
}
div {
  width: 170px;
  height: 100px;
  line-height: 100px;
  margin: 0 auto;
  -o-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.one, .four, .seven, .ten {
  background: rgba(135, 86, 120, .4);
}
.one:hover {
  -o-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
.two, .five, .eight, .eleven {
  background: rgba(0, 228, 246, .4);
}
.two:hover {
  -o-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -webkit-transform: translateY(-20px);  
  transform: translateY(-20px);
}
.three, .six, .nine {
  background: rgba(255, 153, 0, .4);
}
.three:hover {
  -o-transform: translate(-20px, 20px);
  -ms-transform: translate(-20px, 20px);
  -moz-transform: translate(-20px, 20px);
  -webkit-transform: translate(-20px, 20px);
  transform: translate(-20px, 20px);
}
.four:hover {
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.five:hover {
  -o-transform: scaleY(1.2);
  -ms-transform: scaleY(1.2);
  -moz-transform: scaleY(1.2);
  -webkit-transform: scaleY(1.2);
  transform: scaleY(1.2);
}
.six:hover {
  -o-transform: scale(1.2, 0.5);
  -ms-transform: scale(1.2, 0.5);
  -moz-transform: scale(1.2, 0.5);
  -webkit-transform: scale(1.2, 0.5);
  transform: scale(1.2, 0.5);
}
.seven:hover {
  -o-transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  -moz-transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  transform: rotate(720deg);
}
.eight:hover {
  -o-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}
.nine:hover {
  -o-transform: skewY(-20deg);
  -ms-transform: skewY(-20deg);
  -moz-transform: skewY(-20deg);
  -webkit-transform: skewY(-20deg);
  transform: skewY(-20deg);
}
.ten:hover {
  -o-transform: skew(-20deg, 20deg);
  -ms-transform: skew(-20deg, 20deg);
  -moz-transform: skew(-20deg, 20deg);
  -webkit-transform: skew(-20deg, 20deg);
  transform: skew(-20deg, 20deg);
}
.eleven:hover {
  -o-transform: matrix(1.2,0,0.5,1.2,50,0);
  -ms-transform: matrix(1.2,0,0.5,1.2,50,0);
  -moz-transform: matrix(1.2,0,0.5,1.2,50,0);
  -webkit-transform: matrix(1.2,0,0.5,1.2,50,0);
  transform: matrix(1.2,0,0.5,1.2,50,0);
}
Продолжение в следующей статье!
НАХТМЛ
February 2, 2021, 15:01
0 views
0 reactions