css3 3D网格效果

 查看演示  website  立即下载

今天我们想与你分享一个小小的动画概念。这个想法是旋转中 3D 网格项、 全屏显示将其展开和透露的一些内容。

让我们看一看标记和一些重要的样式，要理解这个概念的影响如何完成的。

我们有主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>

让我们看看一些关键的样式。

网格-换行将带有角度的元素

.grid-wrap {
    margin: 10px auto 0;
    max-width: 1090px;
    width: 100%;
    padding: 0;
    perspective: 1500px;
}

网格将会有一个过渡，我们需要将保留 3d变换样式分配给它，因为我们想要能够旋转它的孩子在 3D：

.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;
}

PREVIOUS:
NEXT:
jQuery日期时间插件Datepair
jQuery设计工具包Response