transform

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
transform [2023/09/28 17:27]
tro 		transform [2023/09/28 17:41] (текущий)
tro [skewX(кут), skewY(кут) і skew(x-кут, y-кут)]
Строка 17: Строка 17:
 } }
 </code> </code>
-===== overflow  ===== + 
-Зміщення та властивість overflow зі значенням hidden використовуються при створенні декоративних ефектів з появою прихованого вмісту з-за меж блоку.+===== skewX(кут), skewY(кут) і skew(x-кут, y-кут) ===== 
 +використовуються для визначення параметрів викривлення (нахилу, деформування) сторін елемента відносно координатних осей. Якщо для skew() вказано тільки одне значення, друге буде дорівнювати 0, тобто це буде аналог skewX().
 <code> <code>
 .box { .box {
-  position: relative; +  transform: skewX(1.15);
-} +
- +
-.overlay { +
-  position: absolute; +
-  top: 0; +
-  left: 0; +
-  width: 100%; +
-  height: 100%;+
 } }
 </code> </code>
-===== skewX(кут), skewY(кут) і skew(x-кут, y-кут) ===== 
-використовуються для визначення параметрів викривлення (нахилу, деформування) сторін елемента відносно координатних осей. Якщо для skew() вказано тільки одне значення, друге буде дорівнювати 0, тобто це буде аналог skewX(). 
 ===== scale ===== ===== scale =====
 Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію навколишніх елементів. Якщо для scale() задано певне значення, друге буде таким самим. Функції scaleX(tx), scaleY(ty) і scale(tx, ty) масштабують блок по ширині та/або висоті, не впливаючи на геометрію навколишніх елементів. Якщо для scale() задано певне значення, друге буде таким самим.
Строка 41: Строка 32:
 } }
 </code> </code>
-===== opacity  =====+==== opacity  ====
 Прозорість Прозорість
-===== transform-origin =====+==== transform-origin ====
 Змінює точку навколо котрої буде повертатись Змінює точку навколо котрої буде повертатись
 <code> <code>
Строка 51: Строка 42:
 } }
 </code> </code>
 +==== overflow  ====
 +Зміщення та властивість overflow зі значенням hidden використовуються при створенні декоративних ефектів з появою прихованого вмісту з-за меж блоку.
 +<code>
 +.box {
 +  position: relative;
 +}
  
 +.overlay {
 +  position: absolute;
 +  top: 0;
 +  left: 0;
 +  width: 100%;
 +  height: 100%;
 +}
 +</code>
  • /sites/data/attic/transform.1695922039.txt.gz
  • Последнее изменение: 2023/09/28 17:27
  • — tro