Normalmente, quando o texto é adicionado a uma página da web em uma posição horizontal na tela do monitor. No entanto, o CSS fornece várias maneiras de mudar a posição do texto de acordo com as preferências. Também podemos alterar a direção e o ângulo do texto usando propriedades CSS. Mais especificamente, o texto pode ser girado a 90 graus.

Este manual ensinará como girar o texto a 90 graus. Então vamos começar!

Como girar o texto 90 graus em CSS?

Para girar o texto a 90 graus no CSS, o “transformar”Propriedade é usada. Antes de usá -lo, em primeiro lugar, discutiremos esta propriedade CSS para uma melhor compreensão.

O que é a propriedade "Transform" em CSS?

O "transformar”A propriedade é usada para a transformação 2D e 3D de qualquer elemento. Esta propriedade permite que um elemento gire, mova, espete e escala. Você também pode utilizar esta propriedade para girar o texto adicionado a 90 graus.

Sintaxe

Sintaxe do “transformar”Propriedade é:

Transform

Descrição dos valores acima são:

• nenhum: É usado para não definir transformação em nenhum elemento.
• Funções de transformação: Pode ser usado para especificar diferentes funções, como girtate (), escala (), mover () e inclinação ().

Vamos passar para o exemplo prático para utilizar a propriedade Transform para o texto rotativo em 90 graus.

Exemplo: texto giratório 90 graus em CSS

No HTML, adicionaremos um título e parágrafo usando

e

tag, respectivamente:

Linuxhint

rotação do texto em 90 graus

Isso mostrará a seguinte saída:

Agora, vamos nos mudar para o CSS e aplicar o “transformar”Propriedade para isso. Para fazer isso, use “p”Para acessar o parágrafo criado no arquivo html. Depois disso, use a propriedade Transform e defina o ângulo de rotação como “90DEG”Na função rotate (). Em seguida, use o “Origina de transformação”Propriedade e defina seu valor para”esquerda”Para girar o texto no sentido horário. Além disso, definimos a margem-esquerda “70px”Para dar a margem do lado esquerdo do parágrafo, e para modelar, defina o peso da fonte e o tamanho da fonte como“mais ousado" e "extra grande”, Respectivamente:

P
Transformar: girar (90DEG);
Origin de transformação: esquerda;
margem-esquerda: 70px;
Peso da fonte: mais ousado;
tamanho de fonte: x-large;

Observação: Aqui o "Origina de transformação”A propriedade é usada para definir o eixo x e o eixo y da rotação.

Após a implementação do código acima, vá para o HTML e execute -o para ver o seguinte resultado:

Pode -se observar que usando o “transformarPropriedade, nosso texto é girado com sucesso a 90 graus.

Conclusão

Para girar o texto a 90 graus, o “transformar”Propriedade é usada. O ângulo da rotação é definido de acordo com o valor de grau especificado. Usando isso, você também pode definir diferentes ângulos do texto de acordo com sua escolha. Neste artigo, explicamos como girar o texto 90 graus usando a propriedade Transform com a ajuda de um exemplo.