Pure CSS 3D Flip Box
CSS 3D Flip Box
No JavaScript, pure CSS. Download CSS and/or SASS file.
You can use nearly every content inside the box.
Download
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 SASS
The SASS Files (.scss) is here. Uses Compass. Easy to customize your Flip Box.
Download ZIP
Full package download. HTML, CSS and SASS included.
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...