css3 // 3D Flip Cards

The 3D transforms in this demo work in latest Safari, latest latest Chrome, latest Firefox, and versions of Opera running the Blink rendering engine. Browsers without 3D acceleration just switch the z-index, so you won't lose any functionality.

These cards are using -webkit-transform: rotateY() and rotateX(); with some of the 3D settings: -webkit-transform-style: preserve3d; and -webkit-transform-perspective.
Mozilla browsers are using the -moz-transform equivalents.

Mouse Over Me!

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.

check you on the flip side

Contact Us

Acme, Co.
123 Easy St.
Austin, TX 78731

Or send us a message

Send us a Fake Message

Click or tap this circle!

Tap Again!

Configure Block

Top Sellers

  1. Super seller
  2. Super seller
  3. Super seller

Edit List

Display items


Click or tap for
Diagonal Rotation

woahdude

like a diamond in the rough

yes, I'm a little crooked

Swing like a gate

Any axis is possible