Girar Imagens e Texto com CSS

Oi. Hoje trouxe um tutorial legal para quem deseja destacar imagens específicas ou aplicar algum efeito em todas as imagens do seu blog; para este tutorial, estive explorando alguns dos códigos de Kai Exo, a quem vão os créditos. Trata-se de uma rotação hover (ou seja, aparece quando o mouse passar por um elemento) proporcionada por CSS, muito rápida de ser feita. Vamos lá então...
Exemplos (passe o mouse sobre as imagens ou texto):

Para acrescentar este efeito, cole em qualquer lugar que você queira que ele apareça o seguinte código:
 <style>
.imgrotation{-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform:perspective(600px) rotateX(0deg);
-o-transform:perspective(600px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.imgrotation:hover{
-webkit-transform: perspective(600px) rotateX(360deg) ;
-moz-transform: perspective(600px) rotateX(360deg) ;
-o-transform: perspective(600px) rotateX(360deg);}
</style>
<center><img class="imgrotation" src="URL DA IMAGEM" /></center>

O segredo é ir brincando com os números. Eles é quem definem o tipo de rotação e como ela será feita. Por exemplo, desse jeito aqui a imagem ficará de "cabeça para baixo" e vai fazer um giro até sua posição inicial, o famoso "180 180 360" rsrsrs...:


Código: 
 <style>
.imgrotation{-webkit-transform: perspective(600px) rotateX(180deg);
-moz-transform:perspective(600px) rotateX(180deg);
-o-transform:perspective(600px) rotateX(180deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.imgrotation:hover{
-webkit-transform: perspective(100px) rotateX(360deg) ;
-moz-transform: perspective(100px) rotateX(360deg) ;
-o-transform: perspective(100px) rotateX(360deg);}
</style>
<center><img class="imgrotation" src="URL DA IMAGEM" /></center>

E em textos, será que funciona? Hmmm...vamos ver:
Roda roda roda, roda roda roda, roda....rodou!

Funciona! Mas é melhor que seja aplicando em trechos específicos, se não quem estiver lendo vai ficar confuso neh ^^.
Código:
 <style>
.txtrotation{-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform:perspective(600px) rotateX(0deg);
-o-transform:perspective(600px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.txtrotation:hover{
-webkit-transform: perspective(600px) rotateX(360deg) ;
-moz-transform: perspective(600px) rotateX(360deg) ;
-o-transform: perspective(600px) rotateX(360deg);}
</style>
<div class="txtrotation" style="font-size:20px; text-align:center; clear: both; font-color:pink; font-family:Monotype Corsiva;">
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO!
</div>

No trecho style="font-size..." você pode aplicar os estilos aos textos, fontes, cores...
Espero que gostem e beijus <3

5 Comments

  1. Bia04 dezembro

    vou usar isso numa imagem de boas vindas ^^

    ResponderExcluir
  2. Maga Clow04 dezembro

    Sugoiii

    = ¬ = *babando*

    ResponderExcluir
  3. ✖~ Nakashita Beel11 dezembro

    Colocar isso no proximo Lay (adcionando nos favoritos *-* )

    ResponderExcluir
  4. AND27 janeiro

    Oi boa tarde, é possivel dar esse efeito mudando de uma imagem para outra? por exemplo: tenho uma imagem de um carro e quando passo mouse ele gira e vira para uma imagem de uma moto...
    é possivel?

    ResponderExcluir
    Respostas
    1. Roberta28 janeiro

      Oie ^^ Conheço um jeito de mudar de imagem, mas não com esse efeito aplicado. Provavelmente deve ser possível; vou verificar melhor e postar a maneira como sei posteriormente ok?

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up