Fala galerinha.
Nesse post, vamos desenvolver a estrutura basica de um flip card usando HTML5 e CSS3. Em um próximo post, usando essa mesma estrutura basica, faremos algumas estilizações para a aplicação desses cards em um exemplo real.
Então bora lá.
CRIANDO ESTRUTURA HTML
Para desenvolvermos um flip card, primeiro criamos uma div, um container que funcionará como uma caixa 3D para que nossa carta gire. No meu exemplo, vamos criar essa div com uma classe de nome flip-container.
Agora que criamos o nosso box 3D, vamos precisar criar um outro container que irá conter os dois lados da nossa carta que eu vou chamar nesse exemplo de flipCard.
E finalmente, agora que já temos nosso box 3D e o container onde alocaremos a div que compreenderá a frente e o verso do card, criaremos as divs que serão a representação dessas partes.
Nesse exemplo eu utilizarei as classes flipFront e flipBack para represetar respectivamente frente e verso.
A partir desse momento, qualquer conteúdo que for adicionado dentro da flipFront, será mostrado na frente do card, e qualquer conteúdo que for adicionado dentro da flipBack, será adicionado na parte de trás do Card. Nesse momento para facilitar nosso entendimento, vamos utilizar duas imagens, e para isso, vou abrir um parenteses para sugerir um site onde você pode baixar imagens gratuitamente para seu projeto. O Site pixabay.com. Um site muito fácil de usar e você pode baixar as duas imagens necessárias nele.
Agora que já temos a estrutura toda pronta e as imagens que vamos usar, vamos começar a trabalhar a estrutura CSS do projeto. Supondo que você já tenha um arquivo css linkado ao projeto, ou esteja usando o método incorporado na página, vamos começar.
APLICANDO ESTILO CSS A ESTRUTURA HTML5
A primeira coisa que faremos é definir algumas propriedades para o flip-container, que é o nosso box 3D. Teremos que definir uma profundidade para ele e isso é possível através da propriedade perspective com o valor 1000px. Definiremos também tamanho para esse container, assim, todos os outros containers filhos podem ter seus tamanhos definidos com width e height em 100%, o que fará com que eles ocupem todo o espaço do container pai.
Agora definiremos algumas propriedades para o container filho, ou seja, o flipCard, que é a div que contem os dois lados do nosso Card. Vamos definir width e height em 100%, para que ele ocupe 100% do espaço. Definiremos também a propriedade transition com o valor de .8s para que ao passar o mouse sobre o card o giro aconteça de forma suave e vamos usar um transform-style com o valor preserve-3d. Também vamos usar position relative para posicionar as duas cartas dentro dessa div com o position absolute no passo seguinte.
Agora basta configurar o flipFront e o FlipBack, que devem receber o position absolute, o width e height em 100%. Essas configurações serão aplicadas aos dois.
Agora o que será diferente entre a flipFront e a flipBack será que cada uma receberá uma imagem diferente. E também que a flipBack recebe a propriedade transform com o valor rotateY(180deg). As imagens nesse caso serão inseridas no card via propriedade background-image com o endereço da imagem e utilizaremos a propriedade background-size com o valor cover que fará com que a imagem se encaixe dentro da div independentemente de seu tamanho.
DISPARANDO O EFEITO DE GIRAR O CARD
A partir daqui existem algumas possibilidades de fazermos esses cards girarem. Podemos girá-los através de um gatilho de click por exemplo, adicionando uma nova classe ao elemento flipCard assim que ele é clicado e removendo essa classe quando clicamos novamente. Podemos ainda simplesmente fazer o card girar quando o mouse for posicionado em cima da flipCard, e quando o mouse for retirado de cima da div, girá-la de volta.
No nosso caso, vamos fazer ela girar quando o mouse passar por cima da div, com o efeito hover. Para isso, copiamos a classe flipCard logo abaixo e adiconamos :hover a ela, em seguida adicionamos a propriedade transform com o valor rotateY(180deg).
Isso fará com que, quando passarmos o mouse por sobre o Card, ele gire e quando retirarmos o mouse de cima do card, ele gire de volta.
Veja o resultado abaixo:
Fonte do aprendizado: Treina Web
2 Comentários
Esse recurso é muito usado na área do EAD, principalmente quando queremos colocar interatividade né?
ResponderExcluirVocê poderia fazer um explicando o flip card com texto, acho que seria muito bacana.
Seu conteúdo está muito bom Rodrigo, continua postanto.
Valeu pelo comentário Abner. Seguindo seu conselho, farei algumas versões desse flip card sim. Obrigado!!
ResponderExcluir