transform

CSS-трансформації дозволяють зміщувати, повертати елементи та змінювати їх масштаб — тобто додавати декоративні ефекти. Трансформації змінюють форму та положення елемента, не впливаючи на інші елементи сторінки. За замовчуванням трансформація відбувається відносно центру елемента. Властивість transform відповідає за застосування однієї або більше трансформацій елемента. Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію навколишніх елементів. Якщо для scale() задано певне значення, друге буде таким самим.

.box {
  transform: scale(1.15);
}

Прозорість

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

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

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

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

.box {
  position: relative;
}

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

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