28 de fev de 2014

Efeito Rotate no blog

Olá, hoje vim trazer um tutorial que me foi pedido por Anônimo: Como colocar efeito rotate
nos seguidores do blog. Vou aproveitar o tutorial e ensinar como colocar o efeito em qualquer
na sidebar do blog. 


O código padrão do efeito é esse:

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);


Para colocar na sidebar:


.sidebar .widget {
background: #fff;  
padding: 5px 10px; 
box-shadow: 0px 1px 1px #C0C0C0; 
}
.sidebar .widget:hover { 
background: #fff; 
-webkit-transform: rotate(3deg);  código para rodar
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}

No exemplo acima eu coloquei no hover, então o efeito só vai aparecer quando passar o mouse em cima.
Aumente os números em rotate para aumentar o efeito.

Outro exemplo:

Para colocar nos seguidore do google+

#PlusFollowers1{
border:4px solid #F73D6D;
}
#PlusFollowers1:HOVER{
-webkit-transition-duration: .50s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Olhe o efeito aqui

-webkit-transition-duration: .50s;-Adicionei este código para colocar a duração do efeito.

2 comentários :

  1. Oii , fiquei com dúvidas , qual código devo alterar ? ou antes , depois , acima ou abaixo de qual código ?

    Seu blog está Lindo , parabéns

    ResponderExcluir
  2. Estéfane, você deve alterar ou colocar ( se quiser) a duração do efeito.
    Por exemplo:
    Se você quiser colocar o efeito na sidebar com efeito hover, onde tem:
    . sidebar.widget, logo depois da chave } de fechamento coloque:

    .sidebar.widget:hover {
    background: #fff;
    -webkit-transform: rotate(3deg); código para rodar
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -webkit-transition-duration: .50s;
    }
    Para colocar a duração do efeito acima de da chave } de fechamento do código
    você colocar:
    -webkit-transition-duration: .50s;
    esse 50s você pode alterar para 60, 30
    Onde tem 3deg é o ângulo que o objeto vai rodar.
    Esse você também pode mudar.

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo