CSS gira o fundo
Exemplo # 01:
Vamos começar com este script html com a tag básica html simples seguida pela etiqueta principal usada para tocar a página da web através de sua tag "título". O corpo da tag html foi coberto com diferentes elementos como div e rótulos. Temos dois elementos principais de div neste script html. Em ambos os principais elementos da div, também temos dois filhos "div" tags, que são especificados por duas classes A e B diferentes. Ambas as tags internas de div estão usando o elemento "etiqueta" para rotular algum texto dentro do "div" e especificar a div normalmente ou girada. Ambas as gravadoras obtiveram a borda de 1px em estilo tracejado, enquanto a primeira etiqueta div seria azul e a segunda seria vermelha.
Quando damos uma olhada na etiqueta de estilo, sabemos que as duas seções internas “div” são estilizadas separadamente usando suas respectivas classes: A e B. Ambos os elementos DIV estão usando a mesma imagem de fundo do sistema, sem repetição de fundo, a mesma altura e a mesma largura: 120px e 30px. Enquanto a segunda div interior também contém algum estilo extra. Usamos a propriedade Margin-Top para colocar esta seção div 100px longe da parte superior da página HTML e giramos a 90 graus à direita usando a propriedade Transform.
Depois disso, giramos 45 graus na direção oposta de onde começou. Vamos salvar e executar este script agora.
A saída abaixo está mostrando uma representação clara do código HTML acima. A primeira seção div contém uma imagem com um rótulo sem rotação e nenhum fundo foi repetido. A outra seção DIV contém uma imagem e o rótulo enquanto ela foi girada primeiro a 90 graus e depois inclinada, traduzindo e escalando 45 graus em direção à sua posição original.
Exemplo # 02:
Dentro do exemplo acima, giramos as seções div, juntamente com suas imagens de fundo e os rótulos que eles contêm. Agora, estaremos analisando o uso de diferentes propriedades para girar a imagem de fundo com e sem seu texto na página HTML. O corpo desta página HTML foi preenchido com um título de tamanho 1 e 4 seções DIV diferentes com alguns textos. Todos esses 4 divs foram especificados com diferentes IDs e classes para estilizá -los separadamente: ID “girateImageOnly” para a primeira div, classe “girada” para a segunda div, classe RotateTranslate ”para a terceira seção Div e a classe“ Translaterotate ” Para a quarta seção div. Dentro do elemento de tag de estilo, usamos o elemento div no mesmo estilo para todos os 4 elementos para algumas propriedades. Então, especificamos a posição absoluta, preenchimento esquerdo de 40px, preenchimento superior de 100px, largura e altura de 100px para todos, e a imagem de fundo seria a mesma para todos.
Enquanto usamos o ID da primeira div nessa tag de estilo para mudar sua posição em relação ao parente, alterando a largura e a altura e as margens da esquerda. A imagem de fundo para a primeira div não seria substituída e a mais velha seria usada. A imagem de fundo para esta seção div seria girada 45 graus sem traduzir ou girar seu texto. Depois disso, todas as três seções da Div estariam substituindo a nova imagem de fundo.
A segunda seção DIV foi descrita 2px tracejada, girada 45 graus que seu texto também será traduzido por 200 pixels. A terceira seção div.
A saída para este script HTML tem mostrado um total de 4 divs com imagens de fundo. A primeira div tem sido usada as diferentes imagens de fundo enquanto os outros estão substituindo as novas imagens. A imagem de fundo da primeira seção div foi girada para 45 graus enquanto seu texto não foi girado.
A imagem de fundo para a segunda divisão girou para 45 graus enquanto seu texto foi traduzido para 200 pixels. A imagem de fundo para a terceira seção div foi girada para 90 graus junto com seu texto. Assim, a imagem de fundo para a quarta seção foi girada para 180 graus e seu texto foi traduzido para 180 pixels.
Exemplo # 03:
Vamos começar com o último exemplo deste artigo para usar algumas propriedades do CSS nas imagens de fundo de alguns elementos da página da web html. Vamos dar uma olhada no corpo da página HTML primeiro. Dentro da etiqueta corporal para esta página HTML, usamos o único título do tamanho 1. Não há mais nada a ser feito na etiqueta corporal, então vamos dar uma olhada na etiqueta de estilo da página HTML. Dentro da etiqueta principal do código HTML, há uma tag de título que foi usada para tocar isso como "transformação da imagem de fundo".
Esta tag de estilo foi iniciada com o uso de elementos do corpo. Para o estilo, usamos a imagem de fundo da propriedade para adicionar a imagem como um fundo. Estamos definindo o plano de fundo para não repetir para que a imagem de fundo não possa ser repetida na página da web html. Além disso, a propriedade de atendimento em segundo plano é usada para corrigir a imagem em segundo plano e o fluxo de texto foi usado para herdar as propriedades gerais de conteúdo ao longo da página. Outro elemento corporal foi usado com o atributo após a criação de outra imagem de fundo com posição absoluta: margens superiores de 10%, margem esquerda de 30%, largura e altura de 300 pixels, juntamente com a mesma imagem de fundo que contém a opacidade de 0.5.
O raio para a fronteira desta imagem foi definido como 50%. Isso significa que esta imagem será mostrada em um círculo. Além disso, sua imagem de fundo será girada 45 graus e nenhuma propriedade de repetição de fundo foi aplicada para que a imagem possa ser repetida muitas vezes.
A saída está mostrando a primeira imagem de fundo sendo exibida simplesmente sem qualquer rotação, sem tradução e sem repetir. Enquanto a segunda imagem de fundo foi girada 45 graus com um raio de 50% e a imagem de fundo é repetida muitas vezes, como mostrado na imagem abaixo.
Conclusão
Este artigo constitui o uso de diferentes propriedades CSS para girar as imagens de fundo de qualquer página HTML em determinados graus. Exemplos HTML foram tentados utilizar essas propriedades interessantes do CSS de uma maneira muito simples e única. Para esses exemplos, utilizamos a propriedade de imagem-imagem, propriedade de repetição de fundo, propriedade de atimento de fundo, propriedade de text-overflow, conteúdo, posição, propriedade-radio de fronteira, transformação, opacidade e diferentes propriedades de largura/altura para alcançar a saída necessária para girar o fundo.