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!DhirajCSS - Cascading Style SheetsjQueryMobile Web TechnologyTutorialsadvance web technology,animated card,Animated image,animation delay,animation direction,card flipping effect,configurable settings,CSS,CSS 3,css animation,css effects,CSS framework,css loop animation,css transform,css3,css3 box shadow,CSS3 transitons,doctype html,flip,flip effect,flipping card,free open source,gaming,graphical user interface,grid system,html5,interactive web applications,javascript,javascript functions,mobile,open source javascript,random transition,rotate,rotateX(),rotateY(),smooth transitions,software,solitaire card effect,style,transform 3d,transition effects,transparent background image,visual transitionDo 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.