Различия

Показаны различия между двумя версиями страницы.

--- transform [2023/09/27 21:02]
tro
+++ transform [2023/09/28 17:41] (текущий)
tro [skewX(кут), skewY(кут) і skew(x-кут, y-кут)]
@@ Строка 1: / Строка 1: @@
 ====== transform ======
 CSS-трансформації дозволяють зміщувати, повертати елементи та змінювати їх масштаб — тобто додавати декоративні ефекти. Трансформації змінюють форму та положення елемента, не впливаючи на інші елементи сторінки. За замовчуванням трансформація відбувається відносно центру елемента. Властивість transform відповідає за застосування однієї або більше трансформацій елемента.
+===== translateX(tx), translateY(ty) і translate(tx, ty) =====
+переміщають елемент у горизонтальному (вісь X) та/або вертикальному (вісь Y) напрямках щодо початкового положення.
+<code>
+.box {
+  transform: translate(100px, 200px);
+}
+</code>
+===== rotate / rotateX / rotateY =====
+повертає елементи на задану кількість градусів (одиниця deg). Позитивні значення повертають елемент за годинниковою стрілкою, негативні — проти.
+<code>
+.box {
+  transform: rotate(50deg);
+}
+</code>
+===== skewX(кут), skewY(кут) і skew(x-кут, y-кут) =====
+використовуються для визначення параметрів викривлення (нахилу, деформування) сторін елемента відносно координатних осей. Якщо для skew() вказано тільки одне значення, друге буде дорівнювати 0, тобто це буде аналог skewX().
+<code>
+.box {
+  transform: skewX(1.15);
+}
+</code>
+===== scale =====
 Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію навколишніх елементів. Якщо для scale() задано певне значення, друге буде таким самим.
 <code>
@@ Строка 7: / Строка 32: @@
 }
 </code>
-===== opacity  =====
+==== opacity  ====
 Прозорість
-===== rotate =====
+==== transform-origin ====
-повертає елементи на задану кількість градусів (одиниця deg). Позитивні значення повертають елемент за годинниковою стрілкою, негативні — проти.
+Змінює точку навколо котрої буде повертатись
-===== translateX(tx), translateY(ty) і translate(tx, ty) =====
+<code>
-переміщають елемент у горизонтальному (вісь X) та/або вертикальному (вісь Y) напрямках щодо початкового положення.
+.box {
+  transform: rotate (50deg);
+  transform-origin: top right;
+}
+</code>
+==== overflow  ====
+Зміщення та властивість overflow зі значенням hidden використовуються при створенні декоративних ефектів з появою прихованого вмісту з-за меж блоку.
+<code>
+.box {
+  position: relative;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</code>