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

Пользователь

от nicolette.stoltenberg , в категории: HTML/CSS , 3 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от buster , 2 года назад

@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;
}


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

Пользователь

от cooper.berge , год назад

@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);
}