jQuery 3D CSS card flip effect

Back to original tutorial on Css-Jquery-Design.Com

Click
&
Flip Horizontal
Mouse out
or
Click Outside
Click
&
Flip Vertical
Mouse out
or
Click Outside
Click
&
Flip Diagonal
Mouse out
or
Click Outside

The 3D transforms in this demo work in latest Safari, latest Firefox, Microsoft Edge, Chrome, and versions of Opera running the Blink rendering engine.

These 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.

Back to original tutorial