Animation CSS3 3D Grid effect Flip Design

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.

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 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><!-- /grid-wrap -->
 <div class="content">
 <div class="dummy-img"></div>
 <p class="dummy-text">Some text</p>
 <p class="dummy-text">Some more text</p>
 <!-- ... -->
 <span class="loading"></span>
 <span class="icon close-content"></span>

Demo   Download Source Code

Himanshu is a young engineer living in India. Currently working at Cognizant as a Senior Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: : "Open Source. Millions of open minds can't be wrong!

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community

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