注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

动画 fishcity 1299浏览

3D网格动画效果

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

jquery实例: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;
}

转载请注明:jQ酷 » CSS3 制作3D网格动画效果插件3D Grid Effect

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。