Полный разбор css transform

Приветствую, друзья, сегодня мы полностью разберем css transform. А именно, разберем такие значения css transform, как: translate, rotate, scale, skew, perspective. Трансформация здорово может помочь при разработке, ведь мы можем трансформировать одни элементы, и при этом не затрагивать другие. Так же покажу на примерах где можно использовать то или иное значение css свойства transform. Например, как можно отцентрировать элемент при помощи translate. Давайте начинать!

Примеры css transform

Я подготовил небольшой блок, в котором вы можете наглядно посмотреть что делает то, или иное значения рассматриваемого нами свойства. Для того, что бы активировать трансформацию нужно навести мышку на блок.

Свойство transform: transtale

Данное свойство помогает нам двигать элементы, при этом не влияя на поведение остальных элементов. Мы можем, например, подвинуть блок на несколько пикселей ниже или в сторону. При этом, даже если данный блок заденет другой, то он не повлияет на его позицию, а просто будет отображаться поверх или под ним. Ниже приведены несколько примеров и код к ним.

.block1 {
    transform: translateX(50px);
}

.block2 {
    transform: translateY(-20px);
}

.block3 {
    transform: translate(20px, 20px)
}

Свойство transform: rotate

С помощью rotate мы можем повернуть выбранный элемент. Как и с предыдущим свойством — элемент, который мы повернем, никак не повлияет на отображение соседнего контента.

.block {
    transform: rotate(10deg);
}

CSS свойство transform-origin

С помощью данного css свойства мы можем определить ту точку, вокруг которой мы будем вращать выбранный элемент с помощью rotate. По умолчанию значение свойства transform-origin равно center center. То есть изначально блок крутится вокруг своего центра. Мы можем указать новую точку вращения как через ключевые слова вроде top, left, bottom, right, center, так и через значения вроде 50px или 30%.

.block 1 {
    transform-origin: top left;
}

.block2 {
    transform-origin: 100px 100px;
}

.block3 {
    transform-origin: 110% 100%;
}

Свойство transform: scale

С помощью scale мы можем масштабировать блок, причем как увеличивать его, так и уменьшать. К примеру, если в scale мы передадим 1.5, то мы увеличим блок в 1.5 раза. Если же мы передадим 0.5, то мы его уменьшим в половину. Так же вы можете масштабировать блок только по одной из осей координат.

.block1 {
    transform: scale(1.2);
}

.block2 {
    transform: scaleX(0.8);
}

.block3 {
    transform: scaleY(1.1);
}

.block4 {
    transform: scale(1.2, 0.8);
}

Свойство transform: skew

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

.block1 {
    transform: skewX(20deg);
}

.block2 {
    transform: skewY(20deg);
}

.block3 {
    transform: skew(20deg, 20deg);
}

Свойство transform: matrix

С помощью matrix мы можем применить для нашего блока сразу несколько значений transfrom. Важно, что мы не можем передать в matrix единицы измерения. Так же ключевую роль в данном примере играет последовательность переданных значений. Порядок передачи значений такой: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

.block {
    transform: matrix(1.2, 0.1, 0, 1.2, 25, 25);
}

Легкий способ задать несколько значений для css transform

Если способ с matrix показался вам сложным — не расстраивайтесь, вы можете обойтись без него. Для того, что бы передать несколько значений для css transform вы можете просто записать все трансформации в одну линию, никак их не разделяя.

.block {
    transform: scale(1.2) translate(30px, 30px) rotate(20deg);
}

Статья пока дополняется, и до конца дня здесь появятся примеры для 3d трансформаций)
Пока посмотрите видео, и добавьте статью закладки, что бы не забыть посмотреть примеры, как только они появятся)