Coleção de flips e efeitos de cartões usando CSS3 3D e JQuery.
Fácil de implementar com seu CSS e HTML Markup
Trabalha em todos os navegadores modernos (Google Chrome, Safari & Firefox)
O que você precisa:
- flipcard.css (todo o estilo e efeitos necessários para girar cartões)
- flipcard.js (todos os eventos necessários para acionar os efeitos)
- jQuery-1.8.3.min.js (escrito com jQuery)
- Marcação simples HTML (todos os exemplos estão no arquivo index.html)
extra:
- style.css (algum estilo aleatório para a marcação básica, não necessária)
Você pode alterar as dimensões dos cartões apenas especificando a largura e a altura com esta paz de código CSS:
.Card-container {
Largura: 200px;
Altura: 200px;
}
Alterar log
----> Update: Jul 3, 2014 Fixed some issues with Firefox v30 ----> Update: Feb 26, 2014 Now you can specify the ratio in the container div like this: data-ratio="1:2" ----> Update: Nov 19, 2013 Now the fallback is compatible with IE 11 ----> Update: October 6, 2013 Fixed some issues when you hover over a flipping card when the page is loading ----> Update: August 6, 2013 (replace CSS file) Fix some issues with the 3D effect on Firefox ----> Update: July 26, 2013 Fixed some console errors on IE ----> Update: May 21, 2013 Fixed some sticking issues in firefox for the over flipping cards ----> BIG Update: May 6, 2013 Auto Flip Effect is now available, you can set the time until a card will flip automatically, also you can set the time when the card will start doing the autoflips. (you can see it in the live preview) NOTE: when you do a mouseover on a auto flipping card it will not flip as long as you have the mouse over the card Added color themes for the flipping cards, and you can make your own. ----> Update: April 28, 2013 Now is compatible with jQuery 1.9.1 ----> Update: April 10, 2013 Added also a fallback of a fade effect for browsers that not support CSS3D like old versions of Chrome and Firefox. ----> Update: Feb 18, 2013 Added a fallback for IE of a fade effect.