css3 // Reflective Coin

Click or tap the coin. Control the speed of the coin with the slider.

The coin is using -webkit-transform: rotateY() and rotateX(); with some of the 3D settings: -webkit-transform-style: preserve3d; and -webkit-transform-perspective

The reflections use background-position along with -webkit-transition and -webkit-mask to give the reflection some texture. I haven't figured out how to make it work in both directions.

If you can read this, it means your browser cannot process the 3D transforms on this page. The coin will switch faces with no visual transition.

If you want to see the goods, download Safari 5, Chrome 10+ or the WebKit Nightly build.