Animation CSS3 3D Grid effect Flip Design

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

css 3 flip design

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 behaviour, 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 have 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

* If this Helped you! Please take a Second to like and share it. *

Himanshu is young engineer living in India. Currently working in BOLD.com as UI Engineer. He is an ethical hacker & blogger too. Doing lot's of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info

Leave a reply:

Your email address will not be published.

Sliding Sidebar

We have 20,000+ active geeks


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page