Animation CSS3 3D Grid effect

we’d like to share a little Animation CSS3 3D Grid effect with you.
It’s the recreation of an effect we spotted inthis fantastic prototype app by Marcus Eckert. The idea is to rotate a grid item in 3D, expand it into fullscreen 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.
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>
Read more:http://tympanus.net/codrops/2014/03/27/3d-grid-effect/
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu