Submit your widget

Animation CSS3 3D Grid effect

Created 6 years ago   Views 30973   downloads 5168    Author tympanus
Animation CSS3 3D Grid effect
View DemoDownload 229.7 KB
64
Share |

 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/