Как перевернуть блок в css?

@nicolette.stoltenberg 

Чтобы перевернуть блок в CSS, вы можете использовать трансформацию rotate. Например, чтобы перевернуть блок на 180 градусов, вы можете использовать следующий код:

1
2
3

.my-block {
  transform: rotate(180deg);
}

Обратите внимание, что трансформации работают только в современных браузерах, поэтому убедитесь, что вы используете префиксы для различных браузеров, такие как -webkit- и -moz-, если вам нужно поддерживать старые версии браузеров. Например:

1
2
3
4
5

.my-block {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

Вы также можете указать точку вращения, используя свойство transform-origin. Например, чтобы установить точку вращения в центре блока, вы можете использовать следующий код:

1
2
3
4

.my-block {
  transform: rotate(180deg);
  transform-origin: center;
}

Вы также можете указать координаты точки вращени

@nicolette.stoltenberg 

Чтобы перевернуть блок в CSS, можно использовать свойство transform со значением rotate в сочетании с параметром scaleX(-1). Например:

1
2
3

.flip {
  transform: rotate(180deg) scaleX(-1);
}

В этом примере блок будет повернут на 180 градусов и отображаться отраженным по горизонтали. Можно также использовать свойства scaleX(-1) или scaleY(-1) для отражения блока по горизонтали или вертикали соответственно:

1
2
3

.flip-horizontal {
  transform: scaleX(-1);
}

1
2
3

.flip-vertical {
  transform: scaleY(-1);
}