Enquanto desenvolve uma página da web, os divs geralmente são colocados horizontalmente na tela de exibição por padrão. No entanto, o CSS fornece várias maneiras de reorganizar as divs de acordo com as preferências. Você também pode alterar a orientação e o ângulo do div usando CSS. Nesse caso, é possível girar a div de acordo com o grau necessário.

Neste guia, você falará especificamente sobre o procedimento para girar uma div em um ângulo de 90 graus. Então vamos começar!

Como girar a div 90 graus no CSS?

Para girar a div em 90 graus em CSS “transformar”Propriedade é usada. Como primeiro passo, discutiremos a propriedade Transform para que você possa entender melhor como funciona.

O que é a propriedade "Transform" em CSS?

Para a transformação de um elemento 2D ou 3D, o “transformar”A propriedade do CSS é usada. Esta propriedade permite que um elemento gire, mova, espete e escala.

Sintaxe

A sintaxe da propriedade Transform é:

Transform

Aqui está a descrição dos valores acima:

• nenhum: É usado para restringir a transformação de qualquer elemento.
• Funções de transformação: Existem várias funções como “girar ()","escala()","mover()" e "Skew ()”Isso pode ser especificado.

Agora, vamos para o exemplo prático de usar a propriedade Transform para girar uma div 90 graus no CSS.

Exemplo: girando uma div 90 graus usando a propriedade "transformar" CSS

Primeiro de tudo, no HTML, criaremos um título usando

tag e um contêiner com o nome da classe como “div2”:

Gire Div 90 graus:

Rotação de div

Então, no CSS, use “div”Para acessar o contêiner criado no arquivo html. Depois disso, defina a largura e a altura da div como “200px" e "100px”, Defina a cor de fundo da div como“RGB (129, 129, 38)”. Além disso, definiremos a fronteira da div como “5px" largura, "sólido”Tipo e“vermelho" cor:

div
Largura: 200px;
Altura: 100px;
Antecedentes: RGB (129, 129, 38);
borda: 5px vermelho sólido;

O resultado do código fornecido é:

Agora, aplique o “transformar”Propriedade e Pass“90”De graus como um argumento na função girtate () e transform-origin como“30%”:

Transformar: girar (90DEG);
Origina de transformação: 30%;

Salve o código adicionado e abra o arquivo HTML no navegador. Como resultado, você verá que o DIV adicionado está girado 90 graus:

Nós compilamos o método mais fácil de girar uma div 90 graus no CSS.

Conclusão

Para a rotação de uma div 90 graus no CSS, o “transformar”A propriedade pode ser utilizada. É usado para a transformação de elementos 2D ou 3D. Além disso, esta propriedade permite que um elemento HTML seja girado, espeto, escalado e movido. Este manual discutiu o procedimento de girar uma div 90 graus no CSS.