Propriedades: Efeito Rotate no blog

Olá pessoal!!!! Devo pedir mil desculpas pelo meu sumiço repentino essa semana, meu computador fecho tive que levar para formatar. Também tenho uma péssima noticia o blog entrara em hiatos. Sim isso mesmo...  ficarei fora umas duas ou três semanas. Terei que fazer uma viagem urgente e só poderei voltar quando tudo estiver resolvido. Talvez eu volte antes, torço que sim porque odeio ficar longe do blog. Mas vamos a um tutorial hoje? Me pediram para postar duas coisas como criar aquele bonequinho personalizado da pag do facebook ou twitter como a sidebar hover que usei no template free Uta Orange. Hoje irei mostrar como adicionar aquele efeito hover na sidebar, ele pode ser adicionado em vários lugares não só na sidebar.

Os código padrão do efeito e esse:

Códigos

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

}

Com esse código pode se fazer diversos efeitos. Você pode faze-lo girar para direita, esquerda ou dar uma volta inteira como pode deixa-lo torto e ao passar o mouse ele mude de lado para isso terá que usar efeito hover. O código é bem fácil de arruma e só mexer no 3deg. Vou dar alguns exemplos de códigos já prontos e depois explicar.

Modelo 1: Preview

Códigos

-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);

O mesmo que usei na sidebar do layout o código básico. A forma que usei na layout foi em hover ou seja  apenas aparece quando passarem o mouse.

Modelo 2: Preview

Códigos

-webkit-transform: rotate(-100deg);
-moz-transform: rotate(-100deg);
-o-transform: rotate(-100deg);

Nesse apenas aumentei o tamanho do deg e posição. Para mudar a posição é o mesmo de usar gadget flutuantes. Em gadget flutuante usamos 200px ou -200px para mover a direita ou esquerda ate encaixar onde desejamos correto? Nesse código usamos as mesmas regras mas em vez de px usamos o deg. Se você adicionar (-) na frente da numeração ele vira para direita se remover e deixar apenas o número ele gira para a esquerda.

Modelo 3: Preview

Códigos

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

Parte hover

-webkit-transform: rotate(50deg);

-moz-transform: rotate(50deg);

-o-transform: rotate(50deg);

Nesse coloquei a imagem já virada e na segunda parte de código (hover) eu coloquei ao contrario. Resumindo na primeira parte eu coloquei (-) e na ultima eu removi o (-) usando a explicação anterior.

Modelo 4: Preview

Códigos

-webkit-transition-duration: .50s;

-moz-transform: rotate(620deg);

-webkit-transform: rotate(620deg);

 -o-transform: rotate(620deg);

-ms-transform: rotate(620deg);

transform: rotate(620deg);

Se você observar eu coloquei 620deg você também pode colocar números grandes para que deem uma volta grande. Eu apenas adicionei mais um trechinhos para que o efeito se estendesse.

Agora irei mostrar como adicionar em algum lugar do seu template ou imagem, também vou explicar como usar em efeito hover. Sei que muitos já sabem mas sempre tem iniciantes então é bom sempre explicar direitinho.

Adicionar em uma imagem:

Esse é o código padrão para efeito de imagem, apenas adicionei umas coisas. O código é auto explicativo então nem preciso entrar em detalhes.

Códigos

.imagem1 { → nome do menu ou efeito

margin: 3px; → margem

border: 2px solid #BCAD90;→ borda

-webkit-transition-duration: .50s; → transição

-webkit-transform: rotate(3deg); → código para rodar
-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

}

Adicionar em  Hover:

Tem duas formas de fazer em hover:  aparecer só quando passarem o mouse ou já com o efeito e mudar quando passarem o mouse. Se desejar que o efeito apareça só quando passar o mouse faça como no código abaixo. Apenas adicione na parte que fica :hover {

Códigos

.imagem1 { → nome do menu ou efeito

margin: 3px; → margem

border: 2px solid #BCAD90; → borda

-webkit-transition-duration: .50s; → transição

}

.imagem1:hover {

-webkit-transform: rotate(3deg); → código para rodar
-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);}

Agora faremos como no modelo 4 onde já fica torto e ao passar o mouse muda de posição para isso você adiciona o efeito nas duas partes do código. Veja o exemplo:

Códigos

.imagem1 { → nome do menu ou efeito

margin: 3px; → margem

border: 2px solid #BCAD90;→ borda

-webkit-transform: rotate(-10deg); → código para rodar
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);

}

.imagem1:hover {

-webkit-transform: rotate(50deg); → código para rodar
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);

}

Adicionando em qualquer parte do blog:

Procure pela parte do código que você deseja adicionar, eu vou usar o código da sidebar como explicação. O código inicial da sidebar é .sidebar .widget { então usando o Ctrl +f procure por ela. Você vai encontrar algo similar a isso é claro que o código de sua sidebar pode ser diferente, mas isso não importa e só achar onde ela fica que funciona da mesma forma.

Códigos

.sidebar .widget {→ inicial da sidebar

background: #fff;  → fundo da sidebar

padding: 5px 10px; → divisão

box-shadow: 0px 1px 1px #E7E7E7;

}

.sidebar .widget:hover { →    inicial da sidebar em hover

background: #fff; → fundo da sidebar

-webkit-transform: rotate(3deg); → código para rodar

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

}

Deu para entender? Nesse código eu adicionei na parte em hover então só vai aparecer quando passar o mouse se você desejar que já fique tortinho é só usar a explicação que fiz anterior a essa. É simples e só procurar a onde você deseja adicionar, fico um tantinho grande a post né? rsrs Mas é bem fácil de entender apenas quiz fazer bem explicado e espero que tenham entendido. Antes de terminar quero creditar o AFY pelos avatares. Bem eu vou indo espero que tenham gostado da postagem e entendido qualquer duvida é só perguntar, ate aproxima e bye bye....

OBS: Obrigada pelo tanto de comentários na postagem anterior, ainda estou moderando não consegui responder todos. Sorry os erros de português desta postagem depois eu corrijo.