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.
The effect on this box can be done using 100% CSS.
The other boxes all require some Javascript, but the animation is driven by CSS3.
yes, I'm a little crooked