transform

CSS-трансформації дозволяють зміщувати, повертати елементи та змінювати їх масштаб — тобто додавати декоративні ефекти. Трансформації змінюють форму та положення елемента, не впливаючи на інші елементи сторінки. За замовчуванням трансформація відбувається відносно центру елемента. Властивість transform відповідає за застосування однієї або більше трансформацій елемента.

translateX(tx), translateY(ty) і translate(tx, ty)

переміщають елемент у горизонтальному (вісь X) та/або вертикальному (вісь Y) напрямках щодо початкового положення.

.box {
transform: translate(100px, 200px);
}

opacity

Прозорість

rotate

повертає елементи на задану кількість градусів (одиниця deg). Позитивні значення повертають елемент за годинниковою стрілкою, негативні — проти.

overflow

Зміщення та властивість overflow зі значенням hidden використовуються при створенні декоративних ефектів з появою прихованого вмісту з-за меж блоку.

.box {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

skewX(кут), skewY(кут) і skew(x-кут, y-кут)

використовуються для визначення параметрів викривлення (нахилу, деформування) сторін елемента відносно координатних осей. Якщо для skew() вказано тільки одне значення, друге буде дорівнювати 0, тобто це буде аналог skewX().

scale

Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію навколишніх елементів. Якщо для scale() задано певне значення, друге буде таким самим.

.box {
transform: scale(1.15);
}