CSS gira o topo de 10 graus
Exemplo 01
Vamos começar demonstrando como um elemento de HTML pode ser girado 90 graus. Este exemplo foi inicializado com a principal tag "html" seguida pela tag "Head" titulando nossa página da web html com o "CSS gira 90 graus" na tag "título". O elemento corporal deste código HTML foi inicializado com o título do tamanho 1, i.e., o maior título de HTML. É apenas um cabeçalho simples, sem rotação. Em seguida, temos uma seção "div" que também será colocada normalmente na tela da página da web html sem qualquer rotação.
Outra seção "div" foi usada aqui com a classe especificada "girada". Ambas as seções DIV contêm algum texto dentro delas, mas a segunda seção "div" será girada na tela enquanto a primeira permanecerá normal. O elemento "corpo" agora está fechado e estamos aqui na tag "estilo" para estilizar esta página HTML. Ambas as seções “div” foram estilizadas com largura e altura de 100 pixels, com algumas cores do céu de fundo. Depois disso, a classe “girada” foi usada para estilizar a segunda div a 90 graus usando a propriedade “Transform” do CSS com a cor vermelha de fundo. Devido ao uso da cor de fundo no segundo "div" com sua classe, a segunda cor substituirá a primeira cor nesta seção DIV específica. Vamos salvar este código e executá -lo usando o menu "Executar" Visual Studio "Run".
Temos a saída abaixo da bala para este script html. A primeira div é colocada normalmente na tela do navegador sem qualquer rotação. Enquanto o outro “div” é girado 90 graus conforme a direção e a colocação de seu texto usando o atributo “transform” do CSS, i i.e., de cima para baixo.
Exemplo 02
Dentro deste exemplo, usaremos o método "girar" de atributo de transformação em vez do método simples de "girar" para girar um elemento específico do script html. Desta vez, estamos novamente usando as mesmas tags HTML e "Head" seguindo o mesmo "título". A área do corpo foi inicializada com o cabeçalho simples do tamanho 1 após uma tag de parágrafo simples contendo uma linha de texto. Foi inicializado uma seção DIV normal na página HTML, mostrando que não haverá rotação aplicada a ela.
Outra seção “div” foi inicializada com seu ID “Girar” e conterá uma frase longa explicando que a função de rotação foi aplicada a essa div para rotação de 90 graus. As tags de corpo e HTML estão fechadas até agora. A tag de estilo contém o estilo das duas tags "div", eu.e., A largura das duas etiquetas div seriam 210 pixels, a altura seria 90 pixels, cor amarela de fundo com uma borda marrom sólida de 2 pixels para ambos.
Depois disso, estamos aplicando o atributo "giratez" da propriedade Transform na segunda seção div usando o id desta seção, i i.e., “Gire”. Tem sido usado para girar a div em -9 de graus, eu.e., Na direção oposta (z) da saída de exemplo acima. A propriedade de cor de fundo foi usada novamente para substituir a última cor de fundo estilizada para esta seção DIV específica, i i.e., Será verde, não amarelo, devido à substituição. Este exemplo foi concluído aqui e está pronto para execução no navegador Chrome.
A saída deste exemplo de código HTML mostrou 1 título, 1 parágrafo e 2 seções div na tela do navegador Chrome. Ao mesmo tempo, a primeira seção div de cor amarela foi colocada na direção esquerda para direita sem uma rotação de 1 grau. Por outro lado, a seção verde div foi girada -90 graus à esquerda, oposta à saída de 90 graus simples que seriam colocados na direção certa de uma página HTML.
Exemplo 03
Vamos ter nosso último exemplo deste artigo para demonstrar o uso de uma propriedade simples de transformação para girar alguns elementos html para 90 graus com uma pequena mudança. Para isso, iniciamos este script HTML com a etiqueta principal HTML seguida pela etiqueta da cabeça. Esta tag principal contém uma tag de título para tocar a página da web html como "CSS gira 90 graus" até agora mais uma vez.
Depois disso, temos uma tag de estilo para estilizar a página da web usando diferentes propriedades do estilo CSS. Por enquanto, precisamos pular sua explicação, porque temos que dar uma olhada na seção corporal desta página da HTML antes de pular no estilo. Então, a seção corporal contém um título simples do tamanho 1, eu.e., o maior título de HTML. Após esse título, temos uma seção DIV normal a ser criada em nossa página da web html, e ela não será girada.
Depois disso, temos outra seção DIV a ser usada na página da web html que será girada 90 graus sobre a direção original da página. Foi atribuído com a classe "girar" para uso no estilo. Depois disso, estamos nos movendo em direção à explicação da tag de estilo para adicionar algum estilo à nossa página HTML. O elemento "div" foi usado aqui para estilo. Estamos definindo alinhamento ou preenchimento à esquerda para as tags para 50px e alinhamento superior ou preenchimento para 150px. A posição para ambas as seções div foi definida como absoluta. A largura e a altura das duas seções div também são as mesmas.e. 200px e 100px, respectivamente.
Depois disso, estamos utilizando a classe “girando” da segunda seção div para estilizá -la separadamente também. Estamos definindo a cor de fundo para esta seção div para transparente, eu.e., substituindo a propriedade de cor de fundo acima. Estamos usando a propriedade de esboço em vez da fronteira, eu.e., um contorno tracejado de 5 px. Além disso, a propriedade de transformação está aqui para girar esta seção específica para 90 graus. Vamos executar este código agora.
A saída para este script HTML nos mostrou dois elementos div nesta página; uma de cor amarela, e a outra é transparente. A seção amarela da div é normal em sua posição e não girou de maneira alguma. A seção DIV transparente com um contorno tracejado é girado 90 graus.
Conclusão
Este artigo demonstrou o uso da propriedade Transform do CSS com métodos diferentes para girar qualquer elemento HTML de qualquer página da Web para 90 graus. Para isso, tentamos um atributo simples para girar um elemento para 90 graus e o atributo giratez para girar um elemento para "-90" graus, eu.e., oposto dos 90 graus.