Ajax Loader
×

FlipCard with CSS3

This is a simple creation inspired from this post on CSS3Create. It's quite simple as you can see, all images are contained in a .scene3D class which contains another div.flip and this div contains an image and a div with the hidden title.

So, when the user's mouse :hover the image, the div acheives a flip effect to reveal the title of the image, which is done using the transform /transition properties. This creation also use border-radius, box/text-shadow, and perspective, and the background use gradient . As this creation uses 3D transforms, it won't look good in any browser except Chrome or Safari.

 

Related:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

1 Comments

× New

Sign In to comment

mattlok:

Hi LukyVj

This is an awesome script that seems to work really well.

How do i make the flip show a different image when it flips to the back?

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+