Sometimes a simple design make us creative, so we would like to share a little Animation CSS3 3D Grid effect Flip CSS Design with you.

It's the recreation of an effect we spotted in this fantastic prototype app by Marcus Eckert. The idea is about to rotate a grid item in 3D, expand it into full screen and reveal some content. For our attempt to imitate the app behavior, we created two demos. In the first one, we rotate the grid item vertically and in the second one horizontally.

How CSS3 3D Grid effect Flip Design Works?

It has a main section element which contains a division for the grid and one for the content:

<section class="grid3d vertical" id="grid3d">
 <div class="grid-wrap">
 <div class="grid">
 <figure><img src="img/1.jpg" alt="img01"/></figure>
 <figure><img src="img/2.jpg" alt="img02"/></figure>
 <figure><img src="img/3.jpg" alt="img03"/></figure>
 <!-- ... -->
 </div>
 </div><!-- /grid-wrap -->
 <div class="content">
 <div>
 <div class="dummy-img"></div>
 <p class="dummy-text">Some text</p>
 <p class="dummy-text">Some more text</p>
 </div>
 <div>
 </div>
 <!-- ... -->
 <span class="loading"></span>
 <span class="icon close-content"></span>
 </div>
 </section>

Demo   Download Source Code