Школа программирования

# Трансформация в CSS (transform)

Темы
  • Трансформация в CSS (transform)
  • 2D преобразования

# 1. Сдвиг

div {
	transform: translate(50px, 50px); /* сдвигает элемент на заданное значение по горизонтали и вертикали (положительное значение сдвигает вправо, отрицательное влево) */
	transform: translateX(50px);      /* сдвигает элемент по горизонтали на указанное значение */
	transform: translateY(50px);      /* сдвигает элемент по вертикали на указанное значение */
	transform: translateZ(50px);      /* сдвигает элемент по оси Z на указанное значение */
}
  • Один параметр translate(): перемещает элемент вдоль оси х
  • Два параметра translate(): первое значение для оси х, второе для оси у

# 2. Поворот

div {
	transform: rotate(15deg);   /* поворот */
	transform: rotateX(15deg);  /* поворот по оси X */
	transform: rotateY(15deg);  /* поворот по оси Y */
	transform: rotateZ(15deg);  /* поворот по оси Z */	
}

# 3. Масштабирование

div {
	transform: scale(1.2);   /* масштабирует элемент по горизонтали и вертикали */
	transform: scaleX(1.2);  /* масштабирует элемент по горизонтали */
	transform: scaleY(1.2);  /* масштабирует элемент по вертикали */
	transform: scaleZ(1.2);  /* масштабирует элемент по оси Z */	
}
  • Один параметр scale(): изменение размеров элемента одинаково по высоте и ширине
  • Два параметра scale(): первое значение изменяет размер элемента по горизонтали, второе по вертикали

# 4. Наклон (Искажение)

div {
	transform: skew(15deg);
	transform: skewX(15deg);     /* наклоняет элемент на заданный угол по вертикали */
	transform: skewY(15deg);     /* наклоняет элемент на заданный угол по горизонтали */
}
  • Один параметр skew(): элемент искажается по горизонтали
  • Два параметра skew(): первое значение искажает элемент по горизонтали, второе по вертикали

# Применение нескольких трансформаций

div {
	transform: translate(50px, 50px) rotate(15deg); 
}

# Особенности

  • Не прерывает поток (не влияют на другие элементы)
  • Трансформации можно записывать несколько через пробел

# Примеры

# CSS Emergent Block (Transform)

# Hamburger Animation Menu (Transform)

# CSS Scale Overflow

← 5.3 filter, backdrop-filter →