Imagem com efeito giratório #2

Aiin estava com saudades da minha plantação de xuxu mais linda das galaxias :) Bah demorei p/ aparecer né?! pois é, realmente não consegui passar aqui, estou trabalhando mais que burro de carga rsrsrs
Mas hoje tenho o dia livre (wiiiiiiiiiiiiiiii) e postarei um tuto simples, vocês lembram que já  postei sobre efeito giratório em imagem? aquele bonitinho que a maioria usava nos afiliados, se não lembram vejam aqui .. hoje vou postar o efeito giratório  também, mas não igual o outro lógiiico muié espero que gostem :)


Vá em Design   Editar HTML   Ctrl F e procure por ]]></b:skin>

Cole acima de ]]></b:skin> este código:

Efeito 1:

.rotate{
width:auto;
border-radius:5px;
border: 4px double #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

.rotate:hover{
width:auto;
-webkit-transform: rotateY(-360deg);
border: 4px solid #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}


Imagem gira para o lado =>


Efeito 2:
.rotate{
width:auto;
border: 4px solid #ff73da;
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}
.rotate:hover{
width:auto;
border: dashed 4px #ff73da;
-webkit-transform: rotatex(-360deg);
-webkit-transition-duration: 1.00s;
-moz-transition-duration: 1.00s;
transition-duration: 1.00s;}

Imagem gira para cima ^

  Depois de escolher o estilo Salve!!
 Modifique como quiser o que esta destacado em rosa
 Obs: Agora para que o código funcione coloque onde você quiser que apareça esse efeito o seguinte código:

Se quiser por link na imagem:
<a href="URL"> <img src="LINK DA IMAGEM" class="rotate"></a>

Se não quiser link na imagem:
<img src="LINK DA IMAGEM" class="rotate">

Nesse post tem estilos de bordas : \o/
Aqui tem as cores : \o/

Espero que tenham gostado é simples, mais é bacaninha o efeito!

38 comentários:

  1. muito show!
    Aqui, como coloca a barra lateral separa assim, como a sua?
    beijos

    http://euemeujardimsecreto.blogspot.com.br/

    ResponderExcluir
  2. Hooy fofa,fiz um post falando dos blogs q eu mais amo e o seu estava lá,bjão
    http://blog-garotaambulante.blogspot.com.br/2012/05/blogs-que-eu-amo.html

    ResponderExcluir
  3. Gostei do efeito, é bem interessante. Seus tutoriais são sempre muito bons!
    *-*
    Abç

    http://adraftbox.blogspot.com.br/

    ResponderExcluir
  4. Boa dica...tô blogando e aprendendo,rs.
    Bjinhos
    ilmacavalcante.blogspot.com.br

    ResponderExcluir
  5. Adorei o tutorial...

    Mah
    > spazio teen.blogspot.com.br

    ResponderExcluir
  6. Oii, ameei os tutoriais eu já conhecia até usava o que roda para cima nos meus afiliados, rs. Estou preparando um novo lay lá pro blog por isso está trancado mais quando eu terminar eu venho aqui pedir para que você viisite laá ta ok ?

    Beijos >.<
    deluxesphotoscape.blogspot.com

    ResponderExcluir
  7. Muito obrigada, já estou usando lá no meu blog e tbm já creditei!
    beijos

    http://euemeujardimsecreto.blogspot.com.br/

    ResponderExcluir
  8. >>Amei seu blog... Totalmente diwo...

    Bjokas fofaa..

    http://sweet-flower-laura.blogspot.com.br/

    ResponderExcluir
  9. Oie Flor,
    Vim avisar que esta acontecendo um concurso no meu blog
    Beijinhos

    http://sabinasmaravivlhas.blogspot.com.br/

    ResponderExcluir
  10. Amorzinho queria que me visitasse e lesse minha postagem te agradecendo e te dei créditos na sidebar, caso queira que cite mais algo gostaria que me falasse pois usei seu tutorial e meu bloguinho ficou lindinho, te agradeço de coração por tudo que disponibiliza aqui no seu cantinho nos ajudando a cuidar melhor do nosso cantinho, que Deus te abençoe, te ilumine, te inunde de muito amor e paz, bjs carinhosos,Márcia

    ResponderExcluir
  11. Nossa que fofo oefect *--* AMEEEI demais <3 Bezus Luuh
    Rawr baby ~> teenstyle-official.blogspot.com

    ResponderExcluir
  12. Oii, adorei seu cantinho, super fofo.Bom, eu tenho um blog, que é super novooo, e eu gostaria muito que você me ajudasse a conseguir minha primeira meta.Conto com sua ajuda, e já estou seguindo aqui.

    Beijos :*
    http://blog-golden-girl.blogspot.com.br/

    ResponderExcluir
  13. O efeito e lindo vou usar no meu blog... Nosso vocE^me salvouu viu. Ah aemi seu blog. Ele e tipo meu cantinho kawaii cutii, pode te certeza que eu vou voltar. Seguindo *u*.
    #Besitos------------->http://mikaeetc.blogspot.com

    ResponderExcluir
  14. Muito bom o tutorial!
    http://ladyalen.blogspot.com

    ResponderExcluir
  15. Muito bom o tuto ^^' , amei seu blog , seguindo ~
    Ah , passa lá no meu blog e deixa um recadinho ? Pode participar do concurso também ainda as incrições estão abertas ! E se quiser segui-lo ficaria grata ^^' I Love Mustache|Concurso

    ResponderExcluir
  16. super legal!. Adorei seu blog é lindo e já estou seguindo. bjbj
    http://mundo-dosadolescentes.blogspot.com.br/

    ResponderExcluir
  17. Adorei o tutorial eu tava procurando ele e só encontrei aqui! ANWWW Seu Blog é uma fofura, adorei!Já estou seguindo :D

    Bjoos

    http://blog-the-dream-perfect.blogspot.com.br/

    ResponderExcluir
  18. Vou tentar fazer :)

    http://aquelahistoriana.blogspot.com.br

    ResponderExcluir
  19. Hey, tem selinho pra vc lá no meu blog:http://jeitinhodenerd.blogspot.com.br/2012/06/selinhos.html

    ResponderExcluir
  20. Olá, passei aqui para convidar o seu blog a vir participar na competição do meu blog. Vá a http://fashionteens-ft.blogspot.pt/2012/06/2-meses-fashion-teenar-concurso-beleza.html !!!
    E participe!

    Bjs.

    ResponderExcluir
  21. *OOOOOOOO* que efeitos divos!
    -
    Desculpe encomodar, mas meu blog está de mudança, então se não for encomodo, poderia seguir lá? http://popcoorn-doce.blogspot.com/

    ResponderExcluir
  22. aii flor adorei o tuto já estava procurando faz tempo bjs

    theteenagersplace.blogspot.com

    ResponderExcluir
  23. Oie ,
    você foi selecionada em uma lista de diversas postadoras , por mim , para ser convidada a participar do novo blog ja aberto chamado! MUNDO VINTAGE
    Entra nele:
    http://euamomundovintage.blogspot.com.br/
    O blog vão ter 10 blogueiras com experiencia em contante trabalho para criar o melhor blog do mundo!
    Ele será reinaugurado quando o lay estiver pronto !
    Mais a pena é que ainda só temos 1 postadora e administradora que sou eu!
    Eu ja fiz uma postagem de inicio! Mais logo depois que a lista estiver completa iremos começar e reinaugura-lo com uma postagem feita um pouco por cada uma de nos !Por isso será aberta a conta chamada MV onde postaremos coisas importantissimas e outros como avisos ou apresentações coisas que todos nós escrevemos juntas
    Então aceita o convite?
    Aqui vão as outras convidadas:
    Ellen= domo kun lovers
    Brenda = sweet cherry
    MIllah= sweet princess
    Se aceitar diga mais uma pessoa que merece um cargo!
    Então vamos la , responda esse e-mail rapido!
    OBS :A conta MV não será contada como postadora de tudo tipo nessa lista!
    BEIJOS!S2
    Se você foi escolhida é ma boa postadora e com experiência você foi escolhida por que merece!
    OBS:Ia manda por e-mail só que não tinha o seu

    ResponderExcluir
  24. adorei primeira visitinha aqui e achei o blog muito fofo parabéns *-*
    estou seguindo beijo

    http://day-ddream.blogspot.com.br/

    ResponderExcluir
  25. ameei seu blog, tenho um meio sem graça mas iria adorar sua visita la piecesofdarklove.blogspot.com ja to seguindo ok ? bjuuus parabens pelo seu blog ^^

    ResponderExcluir
  26. dá efeito super in!
    ~~seguindo
    http://cafecomdoideira.blogspot.com

    ResponderExcluir
  27. ahh fica muito fofo,talvez no meu próximo layout eu use *-*

    http://blogdaluluchan.blogspot.com.br/

    ResponderExcluir
  28. Que legal esse tutoo...
    Adorei!!
    Passando para agradecer a visitinha
    Tenha uma boa semana
    beijinhos


    BarbieLicious Pink
    Facebook
    Twitter

    ResponderExcluir
  29. Ou você foi plagiada naquele blog "Bora Plagiar"
    http://bora-plagiar.blogspot.com.br/2012/06/mais-um-cabecalho-plagiado-pra-voces.html

    ResponderExcluir
  30. Oie, passei aqui pra te avisar que o seu cabeçalho (que ficou lindo *3*) foi plagiado pelo "Bora Plagiar" (o anony ali disse né?! deixa eu avisar também xD)

    http://bora-plagiar.blogspot.com.br/2012/06/mais-um-cabecalho-plagiado-pra-voces.html

    ResponderExcluir
  31. Flor, sei que é desagradavel, essa garota esta plagiando todo mundo e ate você:
    http://bora-plagiar.blogspot.com.br/2012/06/mais-um-cabecalho-plagiado-pra-voces.html
    Foça. Viu.

    ResponderExcluir
  32. Flor, Fiz um post dando apoio a todo mundo que foi plagiado. Na verdade eu editei, pois no outro eu avia falando e colocado o link do blog. Isso só fez com que as vistas dela aumentassem. Agora fiz um apenas com meu ponto de vista.
    #Besitos------------->http://mikaeetc.blogspot.com

    ResponderExcluir
  33. Seu blog é muuuuuuuuuuuuuuuuuuutio fofo adorei de verdade...já estou te seguindo, Bjokas
    http://penteadeiradeouro.blogspot.com.br/

    ResponderExcluir
  34. Oi, passando pra te convidar para assistir os videos do Crazy Paródias, são super legais, passa lá e deixe seu comentário com a sua opnião.

    Beijo e te espero por lá :*
    http://crazy-parodias.blogspot.com.br/

    ResponderExcluir