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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от buster , 5 месяцев назад

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


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