Resumo/Informações
- Foi criada uma UL com a classe de painéis, dentro de cada <li> temos uma div com a classe front-panel e outra com a classe back-panel.
- A ideia é que ao hover em um deles, o painel gire e mostre a parte de atrás do cartão.
- 1) Primeiramente, aplicamos rotateY(90deg), pois com isso não será possível mais vê-lo na tela.
- 2) Agora vamos mover o back-panel para ficar em cima do front-panel. Para isso, colocamos o front-panel em absolute, tirando ele do normal document flow, e com isso as outras divs irão subir e tomar o lugar dele, pois é como se ele não estivesse aqui, lembrando que as outras divs (back-panels) estão invisívels.
- 3) Aplicar no back-panel rotateY(90deg), com isso ele fica invisível.
- 4) Criar o @keyframes de 0% estar em rotateY(0deg) e 100% estar em rotateY(90deg).
- 5 Aplicado o @keyframes no front-panel (que está em 0deg) e aplicado o reverse do @keyframes no back-panel, para sair de rotateY(90deg) e ir para rotateY(0deg), ficando visível.
- 6) Acrescentado delay de 0.2s no back-panel para ele continuar invisível enquanto o front-panel começa a dar flip, dando um efeito bonito.