Web, .NET, Apps

Posts Tagged "efeito virar caixas do avesso"

O Efeito “Flip-3D” do CSS3

O Efeito “Flip-3D” do CSS3

By on mar 20, 2014 in CSS3, Tableless | 10.312 comments

  Aqui veremos como é feito o movimento de “virar caixas do avesso” com o passar do mouse. Será usado apenas CSS3 com HTML e nada de javascript/jquery. Protótipo: Código-Fonte: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Flip 3D</title> <style> .flip3D {width:240px;height:200px; margin:10px; float:left;} .flip3D > .front { position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#FC0; width:240px; height:200px; border-radius:7px; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition: transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back { position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 180deg ); background:#80BFFF; width:240px; height:200px; border-radius:7px; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition: transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); } </style> </head> <body> <div class=”flip3D”> <div class=”front”>Box 1 – Front</div> <div class=”back”>Box 1 – Back</div> </div> <div class=”flip3D”> <div class=”front”>Box 2 – Front</div> <div class=”back”>Box 2 – Back</div> </div> <div class=”flip3D”> <div class=”front”>Box 3 – Front</div> <div class=”back”>Box 3 – Back</div> </div> </body> </html> Explicação passo-a-passo....

Read More