3D Grid Effect 制作3D网格动画效果插件

今天,和大家分享一款3D网格动画效果插件3D Grid Effect，这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的。实现的基本思路是对网格项目进行 3D 旋转，扩展成全屏，并呈现内容，不得不说这是一个伟大的创新，哈哈，它提供了非常强的体验性。为了让大家更明了的了解到3D Grid Effect，笔者制作了两个实例，一个垂直旋转网格，一个水平旋转网格。

3D Grid Effect使用方法 

引入核心文件

<script src="js/classie.js"></script>
<script src="js/helper.js"></script>
<script src="js/grid3d.js"></script>

构建html，我们用一个主要的section元素来的包含整个网格内容。

<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>

通过点位元素可以动态的添加内容到网格中。

<div class="placeholder">
    <div class="front"><!-- content of clicked grid item --></div>
    <div class="back"></div>
</div>

写入CSS

.grid-wrap {
    margin: 10px auto 0;
    max-width: 1090px;
    width: 100%;
    padding: 0;
    perspective: 1500px;
}
.grid {
    position: relative;
    transition: all 0.5s cubic-bezier(0,0,0.25,1);
    transform-style: preserve-3d;
}
.view-full .grid {
    transform: translateZ(-1500px);
}
.grid figure.active {
    opacity: 0;
}
.grid .placeholder {
    pointer-events: none;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.5s ease-out;
}
.placeholder > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.placeholder .front img {
    width: 100%;
    height: 100%;
}

.placeholder .back {
    background: white;
    transform: rotateY(180deg);
}
.view-full .placeholder {
    transition: all 0.5s 0.1s cubic-bezier(0,0,0.25,1);
}
.vertical .view-full .placeholder {
    transform: translateZ(1500px) rotateX(-179.9deg);
}

.horizontal .view-full .placeholder {
    transform: translateZ(1500px) rotateY(-179.9deg);
}
.content {
    /* ... */
    overflow-y: scroll;
    height: 0;
    background: #fff;
    visibility: hidden;
    z-index: 400;
    -webkit-overflow-scrolling: touch;
}
.content.show {
    height: auto;
    pointer-events: auto;
    visibility: visible;
}
.content > div.show {
    height: auto;
    opacity: 1; 
    transition: opacity 0.6s;
}