CSS transform. 2D та 3D трансформації

Ділюсь технічними навичками та уроками з HTML-верстки.

 Анімоване ім'я

Що таке 2D і 3D трансформації?

За допомогою 2D і 3D трансформації ми зможемо зрушувати, повертати, масштабувати елементи і робити багато іншого! Задається трансформація властивістю transform і такими значеннями:

Translate (x, y)

Зсуває елемент на нове місце, переміщаючи відносно початкового положення об'єкта вправо і вниз, використовуючи координати X і Y. Записується таким чином translate (x,y).

За замовчуванням

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(0px, 0px);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(30px, 30px);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(30%, -10%);

}

Scale (x, y)

Масштабує елементи, роблячи їх більшими або меншими.

За замовчуванням

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale(1, 1);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale(0.5, 0.2);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale(2);

}

Rotate (n + deg)

Повертає елементи.

За замовчуванням

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate(0deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate(45deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate(-10deg);

}

Skew (x + deg, y + deg)

Деформує (нахиляє) елементи.

За замовчуванням

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(0deg,0deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(10deg,10deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(0deg,-10deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: skew(20deg);

}

Matrix (a, c, b, d, x, y)

Дозволяє об'єднати кілька функцій 2D-трансформацій в одній.

Значення a змінює масштаб по горизонталі. Значення від 0 до 1 зменшує елемент, більше 1 - збільшує. Значення c деформує (зсуває) сторони елемента за віссю Y, позитивне значення - вгору, негативне - вниз. Значення b деформує (зсуває) сторони елемента за віссю X, позитивне значення - вліво, негативне - вправо. Значення d змінює масштаб по вертикалі. Значення менше 1 зменшує елемент, більше 1 - збільшує. Значення x зміщує елемент по осі X, позитивне - вправо, негативне - вліво. Значення y зміщує елемент по осі Y, позитивне значення - вниз, негативне - вгору.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: matrix(1, 0, 0, 1, 0, 0);

}

Значення a змінює масштаб по горизонталі. Значення від 0 до 1 зменшує елемент, більше 1 - збільшує. Значення c деформує (зсуває) сторони елемента за віссю Y, позитивне значення - вгору, негативне - вниз. Значення b деформує (зсуває) сторони елемента за віссю X, позитивне значення - вліво, негативне - вправо. Значення d змінює масштаб по вертикалі. Значення менше 1 зменшує елемент, більше 1 - збільшує. Значення x зміщує елемент по осі X, позитивне - вправо, негативне - вліво. Значення y зміщує елемент по осі Y, позитивне значення - вниз, негативне - вгору.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: matrix(0.5, 0.1, 0.1, 0.5, 10, 15);

}

Множинні 2D трансформації

Дає змогу об'єднати кілька функцій 2D-трансформацій в одній.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate(30px, 30px) rotate(45deg) scale(0.8);

}

Transform-origin

Дозволяє змістити центр трансформації, щодо якого відбувається зміна положення/розміру/форми елемента.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform-origin: center; transform: rotate(45deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4);

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform-origin: top left; transform: rotate(45deg);

}

Perspective, perspective-origin

Встановлення глибини та зміна точки початку координат.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 0;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px; perspective-origin: center;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px; perspective-origin: 0 0;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateX(45deg);

}

Translate3d (x, y, z)

За аналогією зі своїм 2D братом, це значення задає переміщення елемента, але в 3D-просторі. Крім осі X і Y додається вісь Z.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate3d(30px, 30px, 30px);

}

Scale3d (x, y, z)

Задає тривимірне масштабування за однією з осей X Y Z. Фактично повторює функціонал свого 2d аналога.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale3d(1, 1, 1);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: scale3d(1.5, 1.5, 1.5);

}

Rotate3d (x, y, z, deg)

Обертає елемент відносно трьох осей. Елемент повертається під кутом, заданим останнім параметром відносно вектора напрямку x,y,z.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate3d(1, 1, 1, 0deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotate3d(1, 1, 1, 45deg);

}

Matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Задає тривимірне перетворення як однорідну матрицю розміром 4×4 із шістнадцятьма значеннями в стовпцях

Генератор 3D матриць - http://ds-overdesign.com/transform/matrix3d.html

Множинні 3D трансформації

Дає змогу об'єднати кілька функцій 3D-трансформацій в одній.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: translate3d(30px, 30px,30px) rotate3d(1,1,1,30deg);

}

Transform-style

Визначає, як дочірні елементи мають відображатися в 3D-просторі.

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px; transform-style: flat;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(30deg);

}

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px; transform-style: preserve-3d;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(30deg);

}

Backface-visibility

Відображення зворотного боку об'єкта.

visible

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(150deg); backface-visibility: visible;

}

visible

CSS код:

/* стилі оболонки */

.block__wrapper{

width: 150px; height: 150px; background-color: rgba(24, 181, 165, 0.4); perspective: 400px;

}

/* стилі блоку */

.block{

background-color: #18b5a4; width: 100%; height: 100%; transform: rotateY(150deg); backface-visibility: hidden;

}

ArrowПовернутися назад
Star

CSS transform

2D та 3D трансформації

CSS transform. 2D та 3D трансформації

Шпаргалка є доповненням до випуску:

Logo