Como fazer um cartão 3D utilizando apenas CSS
01/08/2013 - Escrito por: Felipe Mitamura Hatanaka
Neste artigo irei mostrar como fazer o efeito do meu cartão de visitas 3D. Para conseguir este efeito utilizei a rotação 3D em uma imagem e no seu verso eu adicionei uma div com um texto.
Primeiro vou mostrar como montamos a estrutura em html. Crie uma arquivo de teste (exemplo: teste.html) e insira o código a seguir:
Digite o texto que aparece no fundo...
Agora vamos para o CSS. No id cartao3d_im utilizaremos a propriedade perspective que define o ponto de vista de onde o elemento é visto. As outras propriedade (-webkit-perspective, -moz-perspective e -o-perspective) server para garantir que funcionará nos outros navegadores.
#cartao3d_im {
position: relative;
width: 400px; /* defina largura padrão da imagem */
height: 220px; /* defina altura padrão da imagem */
margin: 10px auto;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
No hover do id cartao3d_im iremos setar as propriendades transform e box-shadow. A propriedade transform é a principal para dar o efeito 3D pois ela permite aplicar uma transformação 2D ou 3D a um elemento. Ou seja, esta propriedade permite que você gire, escale e movimente os elementos. Já a propriedade box-shadow server apenas para dar o efeito de sombra.
#cartao3d_im:hover #cartao3d_tx, #cartao3d_im.hover_effect #cartao3d_tx {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
-webkit-box-shadow: -5px 5px 5px #aaa;
-moz-box-shadow: -5px 5px 5px #aaa;
box-shadow: -5px 5px 5px #aaa;
}
Seguimos agora para o id cartao3d_tx que recebe o texto que ficará no verso do cartão. Neste elemento temos duas propridades transform-style e transition. A primeira especifica como o elemento 3D é representado no espaço e deve ser utilizada em conjunto com a transform. E a seguinte define a(s) propriedade(s) CSS a(s) qual(is) será(ão) aplicada(s) a(s) transição(ões).
#cartao3d_tx {
width: 100%;
height: 100%;
-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;
}
Por fim irei explicar a classe cartao3d. Nesta classe utilizei a propriedade backface-visibility que define se ou não um elemento deve ser visível quando não está de frente. Esta propriedade é útil quando um elemento é girado, e você não quer ver a parte de trás.
.cartao3d {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.cartao3d.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);
-ms-transform:rotateY(180deg);
box-sizing: border-box;
padding: 10px;
text-align: center;
color: white; /*cor do texto*/
background-color: #aaa; /*cor de fundo*/
}
Por fim, juntando o código html e o css temos o resultado final:
Digite o texto que aparece no fundo...