jQuery 3D CSS card flipping effect – Transform 3D
Do you play the cards game classic Solitaire? I know this is most favorite microsoft’s game. Here, I am not going to discuss about this game nor it’s trick. I am fan of it’s 3D card flipping effect and so, here sharing how can we do this with css and jquery.
For creating this 3D Card flipping effect, I have done some experimental work with CSS3 Transform (3D) rule. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. I had used many transform (3D) effects in Demo.
In this Demo cards are using transform: rotateY() and rotateX(); with some of the 3D settings: transform-style: preserve3d; and perspective. Browsers without 3D acceleration just switch the z-index, so you won’t lose any functionality.
The HTML
Html is very simple.
<div class="flip">
<div class="card">
<div class="face front"> Front Side</div>
<div class="face back"> Back Side</div>
</div>
</div>
The CSS
CSS is also very simple. I had used classes same as card’s side, like- card, front and back face.
.flip {
width: 300px;
height: 400px;
margin: 1em;
perspective: 800;
-moz-perspective: 800;
-webkit-perspective: 800;
}
.flip .card.flipped {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
webkit-backface-visibility: hidden;
z-index: 2;
font: 2.5em Arial;
text-align: center;
line-height: 120px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
background: white;
color: black;
cursor: pointer;
}
The jQuery
As per the cards game classic Solitaire, I had added card flipping effect only after mouse click. For turning back, only mouseout event is required. For both events, I had used my favorite jQuery plugin.
$(‘.flip’).click(function(){
$(this).find(‘.card’).addClass(‘flipped’);
$(this).mouseleave(function(){
$(this).find(‘.card’).removeClass(‘flipped’);
});
return false;
});
Note: Before going I like to make something clear, Internet Explorer 12, Firefox 10+, and Opera 9+ supports the transform (3D) rule and animation property. Chrome, Opera and Safari requires the prefix -webkit- in css.
Important: Internet Explorer 11, and earlier versions, supports the transform (2D) rule only. Internet Explorer 9, and earlier versions, does not support any transform (2D/3D) property.
Your turn
I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! I had already posted some articles of css3 / jQuery. Please check some of these with demo below.
Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development
Very cool little plugin! 🙂
I stumbled upon one small issue though: when I click the front and still move the mouse around I easily hit one of the approaching edges, a mouseleave is triggered and it flips back. One could only flip to the full backside when holding perfectly still.
So I changed the JQuery a tiny bit and got rid of the problem:
$(‘.flip’).click(function(){
$(this).find(‘.card’).addClass(‘flipped’);
$(this).mouseleave(function(){
$(this).find(‘.card’).removeClass(‘flipped’);
});
return false;
});
Now the element responsible for detecting mouse actions is the immobile outer div.flip
Hey Engle, thanks for this.