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.

jQuery-3D-CSS-card-flipping-effect-Transform-3D

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.
view demo

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.

 

 

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!