Borboleta

Saída

Mova -se em direção à próxima seção para aprender sobre a imagem de fundo.

Como girar imagens de fundo usando CSS?

Para violar imagens de fundo usando CSS, aplique o “transformar”Propriedade com a“Scalex" e "Scaley”Transforme depois de acessar a imagem adicionada.

Para fazer isso, siga o procedimento mencionado.

Etapa 1: estilo Div principal contêiner
Acesse o contêiner principal da div com a ajuda do “eu ia”Seletor ao longo do nome de identificação como“#Main-Flip”:

De acordo com o snippet de código acima, as seguintes propriedades CSS foram aplicadas ao contêiner:

• ““cor de fundo”A propriedade é utilizada para definir uma imagem na parte traseira do elemento definido.
• ““largura”Propriedade especifica o tamanho da largura de um elemento.
• ““altura”É usado para definir a altura do elemento.
• ““margem”A propriedade aloca espaço no lado externo do limite definido.

Etapa 2: aplique o estilo CSS no recipiente interno
Acesse o contêiner interno com a ajuda do nome da classe “.Flip interno”:

Em seguida, aplique as seguintes propriedades CSS:

• ““posição”Propriedade especifica o tipo de método de posicionamento usado para um elemento
• ““alinhamento de texto”É utilizado para definir o alinhamento do texto.
• ““transição”Propriedades permitem elementos para alterar os valores em uma animação e duração específicas.
• ““estilo de transformação”É utilizado para especificar os elementos renderizados no espaço 3D que são aninhados.

Etapa 3: Aplicar a propriedade "Transformar"
Acesse o elemento DIV principal com o nome de identificação ao longo do “:flutuar”Seletor e Div interna com a ajuda do nome da classe como“.Flip interno”:

Então:

• Aplicar o "transformar”Propriedade para definir a transformação e define o valor desta propriedade como“Rotatey (180DEG)”
• ““giratey ()”A função é usada para girar a imagem no eixo y em 180deg.

Etapa 4: Defina a “visibilidade da backface”
Acesse os dois contêineres da Div com seu nome como “#front-flip" e ".Flip de volta”Para definir a visibilidade:

Para fazer isso, aplique as propriedades mencionadas:

• ““visibilidade da backface”Define se a face traseira de um elemento deve ou não ser visível ao enfrentar o usuário.
• ““cor”Especifica a cor para o texto adicionado.
• ““cor de fundo”Define a cor na parte traseira do elemento definido.

Saída

Isso se trata de lançar uma imagem de fundo usando CSS.

Conclusão

Para virar a imagem de fundo usando CSS, primeiro, adicione uma imagem usando o “" elemento. Em seguida, aplique as propriedades do CSS “transição”E defina o valor. Depois disso, aplique o “transformar”Propriedade para definir a transformação e definir o valor desta propriedade como“Rotatey (180DEG)”, Que gira a imagem de acordo com o valor declarado. Esta postagem é sobre virar a imagem de fundo usando CSS.