I am very excited and proud to post my first blog (yay!)...

I have been working on 3D transforms with CSS3 recently. Once I got my head around with this pen, I decided to turn this into a cool idea. The idea is a live site where users counter negative moods and enhancing positive moods.

Please see the live version at mymoodnotes.com

The 3D transforms on my pen succesfully 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 should not be losing 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.

I would really appreciate if you guys can give me some feedback about the live site..