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.

 

 

[jetpack_subscription_form title=”Subscribe to Blog via Email” subscribe_text=”Enter your email address to subscribe to this blog and receive notifications of new posts by email.!” subscribe_button=”Sign Me Up” show_subscribers_total=”0″]

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.

You may also like:

You can support this website by sharing. Thank you!