Hover Effect

Pure CSS 3D Flip Box

Fallback! Please use a modern, 'real' browser to view the effect.

CSS 3D Flip Box

No JavaScript, pure CSS. Download CSS and/or SASS file.
You can use nearly every content inside the box.

Download

• Download CSS
• Download SASS
• Download all (ZIP)

Flip right

Hover me to see the effect. The Box will flip to the right.

Yeah.

Flipped to right. Cool. Flip it back to the frontside, just move the mouse out of this box.

Flip up

This Box will flip up. Hover me to see the effect.

Great.

Flipped it up. It will flip back to the front onMouseleave.

Example image

Example with image. This dummy images is from Wallpapers Arena and just for this showcase.

Example image

Example with image. This dummy images is from Wallpapers Arena and just for this showcase.

Example image

Example with image. This dummy images is from Wallpapers Arena and just for this showcase.

Download CSS

Get the CSS File here. Feel free to customize it for your needs.

Download CSS

Download SASS

The SASS Files (.scss) is here. Uses Compass. Easy to customize your Flip Box.

Download SASS

Download ZIP

Full package download. HTML, CSS and SASS included.

Download ZIP

Example image

Example with image. This dummy images is from Wallpapers Arena and just for this showcase.

Example image

Example with image. This dummy images is from Wallpapers Arena and just for this showcase.

Example image

Example with image. This dummy images is from Wallpapers Arena and just for this showcase.

Browser Support

Which Browsers are supported?
Rotate me...

Modern Browser

You can see which browser supports the 'transforms3d' feature on caniuse.

Fallback

Fallback for older Browsers. Especially the Internet Explorer.

Older Browsers

To get the fallback work for old Browsers you have to use the modernizr JavaScript library.

Blog

See more WebDev-Stuff on my Blog. Andre Firchow - HTML, CSS, SASS and more...

Andre Firchow