Create a Flip Effect by Using CSS3

Posted: December 20, 2010 in CSS, HTML
Tags: ,

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari and Chrome browser. Here’s a quick look at how the transform property can produce a flip effect, and how it can be used to create a super fancy one!

* Safari or Chrome browser required to experience the Webkit effect.

The HTML

  • Step 1: Create a maincontainer to position the cards
  • Step 2: Create a card container to add more properties to the cards, when we hover over the container, the card should flip
  • Step 3: Create a new div for the card itself
  • Step 4: Create the front of the card, (in this case it is an image ‘UMBRELLA.png’)
  • Step 5: Now we’re creating the back of the card, in this example I used a table but you can add whatever you want
  • Step 6: At the end we’re creating a button


The CSS – Reset and Positioning

We’re adding the CSS-reset, the fonts, the background and we are positioning the mainContainer in the middle.

The CSS – Styling the Cards

In this section we are styling up the card, we are using border-radius and shadows to give our card a stylish effect.

The CSS – Adding the Animation

Starting at the top, the container divs are given a -webkit-perspective of 1000 to add some realism to the flip motion, otherwise it will all seem a little flat. Next, -webkit-transform-style deter­mines whether child ele­ments lie flat against their par­ent (“flat”) or remain in 3D space (“preserve-3d”). We’re animating the 3d transformation linearly for 0.2 seconds.

When the card is hovered by the mouse, a webkit transform of rotateY(180deg) is added, which rotates the object 180 degrees on the Y axis. -webkit-backface-visibility: hidden; is another fancy webkit property that is put to use on the face of each card. This ensures the opposite side of the card is no longer visible, without this the object would simply flip into a mirror image rather than display the other side.

Advertisements
Comments
  1. Md. Sakib says:

    Vaia your blog site is very nice

  2. psd to html says:

    I have bookmarked your site, keep up the good work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s