Having fun – Flip Cards usando css3

Com css3 é possível fazer coisas que apenas usando javascript antes era possível. Uma delas é o efeito de flip de um conteúdo. Neste exemplo mostrarei como fazer um flip de uma carta que contem duas faces.

Infelizmente não é crossbrowser pois nem todos os navegadores suportam completamente css3, caso seja necessário ser crossbrowser (infelizmente muitas pessoas ainda usam internet explorer) é possível conseguir o mesmo efeito usando jquery flip.

Este não é o primeiro post mostrando como fazer isso, mas nos posts que eu encontrei e até usei para fazer o meu modelo eram todos em inglês e faltavam algumas informações caso quisesse colocar diversas divs dentro de sua carta.

HTML

<div class="span3 flip-card flip-card-hover ">
<div class="supertrunfo">
<div class="supertrunfo-front supertrunfo-face"><!-- Conteúdo da parte da frente da carta --></div>
<div class="supertrunfo-back supertrunfo-face"><!-- Conteúdo da parte de trás da carta --></div>
</div>
</div>

CSS

.span3{
width: 220px;
display: inline-block;
}
.supertrunfo{
width:100%;
height:342px;
border-radius:15px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
}
.flip-card {
position: relative;
height:342px;
z-index: 1;
cursor:pointer;
}
.flip-card{
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
.flip-card-hover:hover .supertrunfo, .flip-card.hover_effect .supertrunfo {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-box-shadow: -5px 5px 5px #aaa;
-moz-box-shadow: -5px 5px 5px #aaa;
box-shadow: -5px 5px 5px #aaa;
}
.supertrunfo-face{
position: absolute;
width: 100%;
height: 342px;
border-radius:15px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background-color:#666666;
}
.supertrunfo-back{
display: block;
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
-o-transform: rotateY(180deg);
-o-box-sizing: border-box;
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
text-align: center;
}

Neste exemplo deixei da forma mais simples para então você ir adicionando o seu conteúdo as cartas.

Usando como base o mesmo html e css descritos acima acabei criando cartas de supertrunfo com os perfis da galera da Ornitorrinko.
Caso queiram usar meu supertrunfo fiquem à vontade para fazerem download do html e css

Source: Ornito

Recent Posts

Leave a Comment