transform

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

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

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

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

.box {
  transform: rotate(50deg);
}

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

.box {
  transform: skewX(1.15);
}

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

.box {
  transform: scale(1.15);
}

Прозорість

Змінює точку навколо котрої буде повертатись

.box {
  transform: rotate (50deg);
  transform-origin: top right;
}

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

.box {
  position: relative;
}

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