CSS Background Image Flip
Neste guia, faremos todas essas técnicas de inversão usando as propriedades CSS. Aqui, aprenderemos sobre o flip de imagem no CSS usando propriedades diferentes.
Exemplo 1:
Para virar a imagem no CSS, devemos ter o código HTML onde adicionamos a imagem. Em seguida, criamos um arquivo CSS para aplicar as propriedades para que nossa imagem vira. Podemos virar nossa imagem em qualquer direção de nossa escolha. Temos o código do Visual Studio, onde temos que realizar esses exemplos. Então, abrimos o arquivo e selecionamos o idioma como "html" e criamos este arquivo html. Então, temos que fazer algum código aqui que é dado na imagem a seguir. Quando concluímos este código, temos que salvá -lo.
Para exibir o cabeçalho em cima da página, adicionamos o “
" marcação. Então temos um parágrafo, e este parágrafo é exibido ao lado do título. Depois disso, fazemos o código principal que está adicionando o código da imagem. Adicionamos a imagem após o cabeçalho e o parágrafo. Usamos a tag "" e em seu "SRC". Damos o caminho ou o nome da imagem que queremos adicionar. Definimos seu valor de largura como "400" e seu valor de altura para "300". Também definimos essa largura e altura em nosso arquivo CSS. Agora, nos movemos para criar nosso arquivo CSS no qual usamos as diferentes propriedades para tornar nossa imagem uma imagem invertida.
Usamos o seletor da imagem "Passe". É usado para selecionar a imagem quando o cursor se move sobre a imagem. O "WebKit-Transform" é a propriedade CSS que é usada para transformar a imagem em 2-D e 3-D. Podemos girar nossa imagem usando isso. O "Scalex" é usado para girar a imagem na direção horizontal. Este código girará a imagem horizontalmente quando movermos o cursor sobre esta imagem.
Esta é a imagem original antes de mover o cursor sobre a imagem. Quando passamos por essa imagem, ela gira na direção horizontal.
A imagem girada também é mostrada no seguinte:
Aqui, você pode ver que a imagem gira horizontalmente. A imagem anterior é a imagem girada depois de mover o cursor sobre a imagem.
Exemplo #2:
Este é o arquivo html. Você pode ver que adicionamos uma imagem aqui neste código. Usamos a “casa.imagem png ”neste exemplo.
Definimos a imagem "largura" como "500px" e a imagem "altura" para "400px". Depois disso, temos uma imagem "Passe o mouse" que "transforma" a imagem no eixo horizontal quando o cursor paira sobre esta imagem.
Saída:
A imagem anterior é a imagem original antes da transformação no eixo horizontal. A imagem a seguir é a imagem após a transformação quando movemos o cursor sobre a imagem. Você pode ver facilmente a diferença entre a imagem anterior e a seguinte imagem dada.
Exemplo #3:
Aqui, os valores de "largura" e "altura" são iguais, e a imagem é a mesma. Mas giramos a imagem verticalmente depois de pairar sobre a imagem. Então, usamos o "Transform" e o definimos como "Scaley (-1)" para que ele gire nossa imagem na direção vertical.
Agora, veja que a imagem gira na direção vertical quando passamos por esta imagem. Aqui, a imagem é mostrada em uma direção de cabeça para baixo que gira verticalmente após pairando sobre isso.
Exemplo #4:
Neste código, usamos os dois valores na "escala". Usamos a "transformação". Em sua "escala", passamos os dois valores "-1, -1", que giram a imagem nas direções vertical e horizontal. Quando movemos o mouse nesta imagem, ele gira em ambas as direções.
Veja que a imagem é girada no eixo vertical e horizontal quando passamos por ela. A imagem anterior é a imagem após pairar sobre a imagem original.
Exemplo #5:
Este exemplo é diferente dos exemplos anteriores. Criamos as diferentes classes de div usando os diferentes nomes. A primeira classe div é chamada de "flip-box". A segunda classe div é nome. E a terceira classe div é chamada de “flip-box-frente”. Depois de definir todas essas classes de div, colocamos uma imagem chamada “Myimage.jpeg. Em seguida, criamos outro nome "div" com um nome "flip-box-back". Agora, escrevemos alguns parágrafos nesta div. Usamos todas essas classes div em nosso arquivo CSS.
Usamos o "corpo" e o "font-família" para "Arial". Em seguida, definimos a largura e a altura do contêiner "Flip Box" para "600px" e "400px", respectivamente. Agora, adicionamos a "borda" e a colocamos como "1px" em sua largura com um tipo "sólido" para que possamos mostrar que, quando essa imagem virar, ela sai da caixa quando movemos o cursor por cima. Adicionamos a "perspectiva" e o definimos como "1000px". Usamos quando devemos adicionar algum efeito tridimensional à imagem.
Agora, temos outro contêiner que é um "intervalo de caixa". Este contêiner define a posição da frente e a parte traseira da imagem. Definimos a "posição" como "parente" e a "largura" e "altura" para "100px". Usamos a propriedade "transição" para controlar a velocidade de animação e defini -la como "0.8s ”.
Depois disso, usamos o "estilo de transformação" para renderizar a imagem no espaço tridimensional. Nós o definimos como “preservar-3d”. Em seguida, temos uma "caixa de flip-box", então, quando passamos pelo pasto pela imagem, ela se moverá na direção horizontal, pois usamos a "transformação" para "girar" e defini-la como "180DEG". Temos o "Flip-Box-Front" e "Flip-Box-Back". Então, damos a posição para ambos aqui. Definimos a "posição" para ambos como "absoluto". A "altura" e "largura" para ambos os contêineres estão definidos como "100px" e "100px", respectivamente. Também definimos a "visibilidade do webkit-backface" para "Hidden". Esta propriedade é usada quando giramos a imagem e a definimos aqui se o usuário verá a face traseira da imagem ou não.
Então, aqui, escondemos isso usando a tag "oculta" com esta propriedade. Agora, estilizamos o lado da frente usando um contêiner "Flip-Box-Front". Definimos a “cor de fundo” como “#bbb” e a “cor” da fonte ou texto para “preto”. Finalmente, estilizamos a parte de trás da imagem usando o “flip-box-back”. Sua “cor de fundo” está definida como “cinza” e a fonte “cor” é definida como “branca”. Usamos a propriedade "Transform" e estabelecemos seu valor para "giratey (180deg)".
Na saída, temos as várias imagens nas quais você pode notar a rotação da imagem. Na última imagem, a parte de trás da imagem também é exibida aqui. Você pode ver como ele gira quando passamos por esta imagem. Todo o texto que escrevemos no código HTML aparecerá na parte traseira da imagem quando essa imagem girar após pairar.
Conclusão
Neste guia, usamos o conceito de flip de imagem no CSS. Realizamos os diferentes exemplos de cruzamento aqui. Viramos nossa imagem na direção vertical ou na direção horizontal ou em ambas as direções após pairando. Também realizamos um exemplo no qual giramos nossa imagem a 180 graus quando passamos pelo mouse sobre a imagem. Usamos as propriedades do CSS em todos os exemplos e renderizamos todas as saídas neste guia. Você verá como a imagem vira ou gira verticalmente e horizontalmente.