Blogger Ever

3D cube flip CSS3 animation

Create an impressive CSS3 flip effect using CSS3 3D transform.

CSS simple properties have amazingly cool uses, just we need to take them out. The 3D transform opened the doors to many possibilities. Cube flip is an easy to create transition using CSS3 properties. Have a look.


See the Pen Cube Flip CSS3 by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.


  • Initially (before hover) we have to just set the containers in a way that when parent rotates 90 deg on X, the first one hides and second one appears straight.
  • Obviously there are two containers so each of them different transform properties.
  • It can create problems when the link is inserted on first container which just flips on hover--no one can click on them.

Browser Supported

It is supported in the following listed browsers:
  • IE 10 (due to 3D transform),
  • Chrome 36.0,
  • Mozilla 16.0 (or with -moz- for 10.0),
  • Safari 4.0,
  • Opera 15.0

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.