3. Card Flip Horizontal Effect and Browser Specific Prefixes

In this tutorial we demonstrate how to add some animation to your DNN skins, and give you the ability to employ these smart effects throughout your site.

We teach you how to create several reusable rollover effects using robust CSS3 transitions and we walk you through how to apply these effects to a 2SexyContent Portfolio app that we created in a previous tutorial.

We will teach you how to modify the 2SexyContent app so that each portfolio item can be configured to use a different transition effect.

This video contains:

• Flipping the underside of the card with CSS3 3D transforms
• How to hide the back face of an element after a 3D transform
• How to flip the underside of the card on hover
• Flipping and animating the front face of the card
• Introduction to browser specific prefixes
• Prefixing all CSS3 properties
• Transferring our effects to an HTML module