Efeito "rotate"

Eu simplesmente amo AOA, gatas elas não?!
~ Hoooy aegyos! ~ (¯ ▽ ¯ ~) Tudo bem com vocês? (espero que sim) bem, eu não desejei a vocês uma feliz páscoa porém lhes desejo agora mesmo atrasado heuehue. Enfim, vocês comeram muito chocolate? Porque eu comi bastante e ainda nem acabei, já estou imaginando as espinhas que terei que encanrar heuehue. (^ Σ ^) Eu estava querendo postar uma resenha hoje, mas eu resolvi postar o efeito rotate que é bem kawai (≧ ◡ ≦) eu digo que ele é exclusivo mesmo tendo vários efeitos com este nome ou similar, então, vejam o (* ω *) preview (* ω *) dele <~.
Vamos usar os códigos? (^ ▽ ^) Então, como de sempre vamos em layout >> adicionar um gadget >> Html/JavaScript e cole o código abaixo:
<center>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="rotate" src="http://i.imgur.com/Oylg6bR.png" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="rotate" src="http://i.imgur.com/Oylg6bR.png" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="rotate" src="http://i.imgur.com/Oylg6bR.png" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="rotate" src="http://i.imgur.com/Oylg6bR.png" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="rotate" src="http://i.imgur.com/Oylg6bR.png" /></a>
</center>
Vamos entender este código:
PS ~> Mude somente os termos destacados!
Onde está link do blog vocês colocaram o url do link desejado, onde está nome do blog é o texto do tooltip (quando passa o mouse) e o termo em negrito será o url da sua imagem.

Agora vocês vão em modelo >> editar html >> click dentro da area dos códigos, dê CTRL + F pesquise por ]]></b:skin> e cole o código abaixo:
.rotate {
margin-top: 4px;
-webkit-transition-duration: .1s;
-webkit-filter: opacity(0.6);
border: 2px solid #ab9b8f;
}
.rotate:hover {
border: 2px solid #efa589;
-webkit-transform: rotate(-30deg);
-webkit-transition:All 2s ease;
-webkit-transition-duration: .45s;
-moz-transition: All 2s ease;
-o-transition: All 2s ease;
-webkit-filter: none;
}

OBS: Para entendermos melhor os códigos, foram usados:
Border: borda da imagem + cor da borda.
Opacity: Opacidade da imagem.
-webkit-transition: Duração e transição de efeito.
-webkit-transform (rotate): rotação da imagem.

Por hoje é só isso cupcakes, talvez a próximo post estarei falando do meu novo layout ou fazendo resenha de dois doramas que terminei recentemente. Espero que usem e tenham gostado! Fiquem com Deus, xoxo e please NÃO REBLOGUEM OU PLAGIEM! (*εε*)

12 comentários:

  1. Eu não comi chocolate algum ;-; Não tenho mais "idade" para isso ;-; É o que meu pais dizem.
    Eu amo/sou o Layout do seu Blog de testes <3 É lindo ;u;
    Ah! Que efeito fofo <3 <3

    >> b-rasiaticos.blogspot.com.br/
    - C h u ~

    ResponderExcluir
    Respostas
    1. Que pena T_T heuehu mds, eles só podem dizem isso para não exagerar nas doçuras, não?! Fico feliz por ter gostado o layout é inspirado no próximo do MR, obrigada ^v^, xoxo e visitarei seu blog.

      Excluir
  2. Eu não ganhei muita coisa na páscoa, só duas caixas de bom bom e um ovo, mas o ovo eu dei pra minha mãe, e as caixas de bom bom já acabaram rsrs'
    Eu amei esse menu, eu realmente acho que usarei no meu próximo layout!
    || d i a m o n d s o n g a l a x y ||

    ResponderExcluir
    Respostas
    1. Pelo menos não passou em "branco" não é mesmo?! *v* heueh. Obrigada, fico feliz por ter gostado e iria ficar cute, espero que use. Visitarei seu blog, xoxo.

      Excluir
  3. Eu não ganhei nenhum chocolatezin , mas para não dizer que fiquei totalmente sem ovo da páscoa, antes, bem antes da páscoa eu já tinha comprado meu ovo da Cacau Show acompanhado do meu fone da mulher maravilha, então nem me importei por não ter ganhado nada, meu auto presente já valeu. Ameeei esse menu, ficou muito bacana :D

    simplesgarota.com

    ResponderExcluir
    Respostas
    1. Awn <|3, mesmo assim saboreou um pouco da páscoa heueh ^3^, obrigada, que bom que gostou Aline. ~Visitarei seu blog, xoxo.

      Excluir
  4. Já conhecia o tutorial ele é muito legal eu adoro.
    Beijokas
    Estou seguindo :3
    sorriso4met4lico.blogspot.com

    ResponderExcluir
    Respostas
    1. Este efeito é bem mesmo, que bom que gostou Paloma. Obrigada por seguir, visitarei seu blog, xoxo ^w^.

      Excluir
  5. Eu ganhei só uma caixa de bombom que horror! ASHUASHUA! esse efeito é tão fofin! (´・ω・`) beijinhos!
    {Cotton candy}

    ResponderExcluir
    Respostas
    1. Mais bombons também são gostosos heuheueh, Que bom que gostou Yuki (´・ω・`) eu também achei. Visitarei seu blog, xoxo.

      Excluir
  6. Amei esse efeito no meu próximo layout ♡

    ResponderExcluir
    Respostas
    1. Que bom tenshi (=*U*=) muito obrigada e bom uso! ~kisus.

      Excluir

Please leia:
- Comente sempre em relação ao post.
- Caso queira usar ~> ♡
xoxo e obrigada aos comentários.

≧ω≦ © Mini Realeza - 2015 por Carol Sgomes | | Todos os direitos reservados - Tecnologia do Blogger ≧ω≦