Reino Kawaii

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:

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