Transform Translate CSS: Effortlessly move your elements with CSS

Transform translate в CSS – это свойство, которое позволяет изменять положение элемента на странице без изменения размеров и формы самого элемента. Оно позволяет сдвигать элемент по горизонтали и вертикали на определенное расстояние.

Пример использования transform translate в CSS:

HTML код:

Это прямоугольник

CSS код:

.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transform: translate(50px, 50px);
}

В данном примере мы с помощью свойства transform translate сдвинули элемент с классом "box" на 50 пикселей вправо и на 50 пикселей вниз относительно его изначального положения.

Также можно задавать значение свойства отрицательным числом, чтобы сдвинуть элемент вверх или влево.

Пример:

.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transform: translate(-20px, -20px);
}

В этом случае мы сдвинули элемент на 20 пикселей вверх и на 20 пикселей влево.

Кроме того, можно комбинировать transform translate с другими свойствами transform, например, с rotate или scale.

Пример:

.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transform: translate(50px, 50px) rotate(45deg);
}

В данном примере мы сдвинули элемент на 50 пикселей вправо и на 50 пикселей вниз, а затем повернули его на 45 градусов.

Таким образом, transform translate – это мощное свойство, которое позволяет создавать интересные эффекты и изменять положение элементов на странице без изменения их размера и формы.