3D cube flip CSS3 animation

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.

Demo

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

Notes

• 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.

Read More:CSS3 transition effect tips for better animation

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