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.
Oii , fiquei com dúvidas , qual código devo alterar ? ou antes , depois , acima ou abaixo de qual código ?
ResponderExcluirSeu blog está Lindo , parabéns
Estéfane, você deve alterar ou colocar ( se quiser) a duração do efeito.
ResponderExcluirPor 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.