Tutorial - Efeito Revert

Boa tarde, gente.

Desculpem a demora para postar hoje, mas fiquei trabalhando na descoberta dos meus presentes de natal. Os encontrei, mas infelizmente fui pega no flagra quando ia abrir, então estou em total decepção. Aos queridos haters que ainda andam me xingando (suspeito que seja só um, hahaha), peço que por favor vão fazer outra coisa e não me obriguem a deletar aquela ask. A tenho por causa dos leitores, pois não vejo diversão em responder perguntas o dia inteiro, então procure o que fazer e não tente prejudicá-los, pois não irei responder mais nenhuma pergunta com ofenças/críticas. Odeio o blog, mas contribui para nossa meta de 2.000.000 visualizações, que feliz deve ser essa vida.

Enfim, me pediram para postar o tutorial do efeito que uso ali nas divulgações. Não recomendo o uso, pois existem efeitos melhores e ele anda dando erro em alguns computadores, recebi algumas reclamações e prints onde fica "ao contrário". Use apenas se gostar bastante e tiver uma ideia formada na cabeça em que o envolva, não é difícil de fazer, mas infelizmente possui um código enorme (que você pode diminuir a partir do Notepad++ como ensinei). O transformei do tumblr Lugar do Html, que é o tumblr da história da menina, portfólio e inspirações, para quem ainda lembra. A visualização está aqui mesmo no blog, logo ali no cabeçalho e por isso dispenso links. Clique em leia mais para aprender.

1. Vá até editar HTML e procure por ]]></b:skin>. Após encontrar a tag, cole acima:

div.flip{

position:relative;

width: 110px; /* Set default width of flip */

height: 120px; /* Set default height */

-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */

-moz-perspective: 600px;

-o-perspective: 600px;

perspective: 600px;

}

div.flip div.rotate{

width: 100%;

height: 100%;

-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */

-webkit-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */

-webkit-transition: all 0.6s ease-in-out 0.3s;

-o-transition: all 0.6s ease-in-out 0.3s;

transition: all 0.6s ease-in-out 0.3s;

}

div.flip div.rotate > *{ /* Target all children elements */

position:absolute;

width: 100%;

height: 100%;

-moz-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

div.flip div.rotate > div{ /* Target all child DIVs */

-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 8px;

background: #eee;

}

div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */

-moz-transform: rotateX(180deg);

-webkit-transform: rotateX(180deg);

-o-transform: rotateX(180deg);

transform: rotateX(180deg);

}

div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */

-moz-transform: rotateX(180deg);

-webkit-transform: rotateX(180deg);

-o-transform: rotateX(180deg);

transform: rotateX(180deg);

}

div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */

-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

transform: rotateY(180deg);

}

div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */

-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

transform: rotateY(180deg);

}

Antes de salvar, troque o 110 lá em cima pela largura e troque o 120 pela altura que você vai usar na sua imagem. Depois disso, você pode salvar normalmente.

2. Dirija-se a um gadget de HTML/JavaScript e nele, cole:

<div class="flip" >

<div class="rotate y">

    <img src="LINKDAIMAGEMINICIAL" />

 <img src="LINKDASEGUNDAIMAGEM" />

</div>

</div>

Agora é só substituir as partes em maiúsculo pelo que está escrito nelas. Salve e seu efeito estará aplicado.