Using the CSS3 transition property to achieve the flop effect

First, CSS3 Transition Properties Transition Understanding:

Transition refers to a page element where a transition from state a changes (not immediately jumps) to State B, as well as the time required for the transition (including setting the transition delay time, and so on).

Second, how to achieve the effect of the flop.

The back and front are shown as follows:

The first step: through the CSS absolute positioning will overlap the two, the second positive picture along the Y axis rotation 180 degrees, the first picture of the back of the backface-visibility set to none, that is, the back is not visible.

HTML code Snippet

<div class= "card" >   
<div class= "Frontface" >< c4/> 
</div>
</div>

CSS Code Snippets

. card{position:relative;height:150px;width:150px;border:1px solid #ccc;}
. Backface{position:absolute; display:block; left:0; top:0; z-index:2; backface-visibility:none;} to save space, Please add the Backface-visibility property Browser compatibility prefix here separately.
. Frontface{position:absolute:left:0;top:0;transform:rotatey (180deg); z-index:1;} Please add the Transform property browser compatibility prefix here.

The second step: in the CSS style, define Flip,mousein,mouseout three class, with JS to determine the mouse hover. Card element (using jquery), the two IMG child elements at the same time the y-axis rotation transition. Transition time: Mouse into 0.5s, the mouse moved out of 0.3s.

CSS Code Snippets

. Flip{-webkit-transform:rotatey (180deg);-moz-transform:rotatey (180deg);-o-transform:rotatey (180deg); Transform: Rotatey (180deg);}
. Mouseout{-moz-transition:all 0.3s!important;-webkit-transition:all 0.3s!important;-o-transition:all 0.3s! Important Transition:all 0.3s!important;}
. Mousein{-moz-transition:all 0.5s!important-webkit-transition:all 0.5s!important-o-transition:all 0.5s!important ; Transition:all 0.5s!important;}

JS Code snippet (first embedded in the jquery library)

$ (document). Ready (function () {

$ ('. Card '). Hover (function () {

$ (this). FIND (' img '). Removeclass (' mouseout '). addclass (' Mousein '). addclass (' Flip ');

},function () {

$ (this). FIND (' img '). Removeclass (' Mousein '). addclass (' mouseout '). addclass (' Flip ');

});

});

Click Effect Chart to see the effect:

Code package download