Различия

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

--- transform [2023/09/28 17:25]
tro [rotate]
+++ transform [2023/09/28 17:41] (текущий)
tro [skewX(кут), skewY(кут) і skew(x-кут, y-кут)]
@@ Строка 9: / Строка 9: @@
 }
 </code>
-===== opacity  =====
-Прозорість
 ===== rotate / rotateX / rotateY =====
 повертає елементи на задану кількість градусів (одиниця deg). Позитивні значення повертають елемент за годинниковою стрілкою, негативні — проти.
@@ Строка 18: / Строка 17: @@
 }
 </code>
-===== overflow  =====
+===== 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>
+.box {
+  transform: scale(1.15);
+}
+</code>
+==== opacity  ====
+Прозорість
+==== transform-origin ====
+Змінює точку навколо котрої буде повертатись
+<code>
+.box {
+  transform: rotate (50deg);
+  transform-origin: top right;
+}
+</code>
+==== overflow  ====
 Зміщення та властивість overflow зі значенням hidden використовуються при створенні декоративних ефектів з появою прихованого вмісту з-за меж блоку.
 <code>
@@ Строка 31: / Строка 55: @@
   width: 100%;
   height: 100%;
-}
-</code>
-===== skewX(кут), skewY(кут) і skew(x-кут, y-кут) =====
-використовуються для визначення параметрів викривлення (нахилу, деформування) сторін елемента відносно координатних осей. Якщо для skew() вказано тільки одне значення, друге буде дорівнювати 0, тобто це буде аналог skewX().
-===== scale =====
-Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію навколишніх елементів. Якщо для scale() задано певне значення, друге буде таким самим.
-<code>
-.box {
-  transform: scale(1.15);
 }
 </code>