15/10/2015

Efeito Translate + Efeito Rotate


Olá queridos bunnie's! Hoje venho ensinar dois efeitos para imagens, ele também é valido para sidebar e textos, mas irei mostrar em imagens dessa vez, basta adaptarem se desejarem em outra parte. O efeito é super simples, é o efeito Translate  e o efeito Rotate.  O  efeito translate permite a imagem se mover para os lados, tanto direita quanto esquerda. Já o rotate permite as imagens ficarem de ponta cabeça ao passar o mouse. 



1.
 Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa cm o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele um dos códigos abaixo!


Translate:
Códigos
.translate {
transform: translate(0px);
-moz-transform: translate(0px);
-webkit-transform: translate(0px);
}
.translate:hover {
transform: translate(160px, 10px);
-moz-transform: translate(160px, 10px);
-webkit-transform: translate(160px, 10px);

Rotate:
Códigos
.rotate {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.rotate:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
Salve!

2. Agora vá ate Layout e abra um novo gadget/javascrit, e dentro cole um dos códigos abaixo, referente ao que você escolheu acima.

Translate:
Códigos
<img src="URLDAIMAGEM" class="translate"/>

Rotate
Códigos
<img src="URLDAIMAGEM" class="rotate"/>

Salve e prontinho!

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345