css3 // 3D Flip Cards

As of February 8th, 2012 the 3D transforms in this demo only work using Safari 5, Chrome 10+, the WebKit Nightly build, and Firefox 10+. Browsers without 3D acceleration just switch the z-index. 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

Mouse Over Me!

This can be done using 100% CSS. Most of this other stuff requires some Javascript, although the animation is CSS.

check you on the flip side

Contact Us

Acme, Co.
123 Easy St.
Dallas, TX 75248

Or send us a message

Send us a Fake Message

Click or tap this circle!

Tap Again!

Configure Block

Top Sellers

  1. Name 1
  2. Name 2
  3. Name 3

Edit List

Display items

Click/Tap
Diagonal Rotation

Told you!