Как перевернуть текст в css?

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

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

Как перевернуть текст в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от anahi_abshire , 3 года назад

@kenya  Перевернуть текст в css можно через transform: rotate :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      p {
        transform: rotate(280deg);
      }
    </style>
  </head>
  <body>
    <p>Перевернуть текст в css</p>
  </body>
</html>

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

от leila.dickinson , 2 года назад

@kenya 

Нет стандартного способа переворота текста в CSS. Однако, вы можете использовать свойство transform для поворота блока текста на 180 градусов. Например:

1
2
3
.rotate-text {
  transform: rotate(180deg);
}


Этот код выровняет все блоки, имеющие класс .rotate-text, перевернутые на 180 градусов. Если вы хотите перевернуть только текст внутри блока, вы можете применить transform к вложенному элементу с текстом, например:

1
2
3
  Перевернутый текст


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.rotate-text {
  /* предотвращает расширение блока */
  display: inline-block;
  /* переворачивает блок на 180 градусов */
  transform: rotate(180deg);
}

.text {
  /* переворачивает текст внутри блока*/
  transform: rotate(180deg);
  /* предотвращает перекрытие других элементов */
  display: inline-block;
}


Этот код переворачивает текст внутри блока text на 180 градусов, который находится в перевёрнутом блоке rotate-text.