插件描述：今天我们想与你分享一个小小的动画概念。这个想法是旋转中 3D 网格项、 全屏显示将其展开和透露的一些内容。
今天我们想与你分享一个小小的动画概念。这个想法是旋转中 3D 网格项、 全屏显示将其展开和透露的一些内容。
让我们看一看标记和一些重要的样式，要理解这个概念的影响如何完成的。
我们有主section包含网格，另一个为内容的元素：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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> |
当我们单击网格项时，我们就去按顺序来选择匹配的内容划分。内容司还包含两个范围、 活动指示灯来模拟一些加载和交叉闭幕。
我们旋转和扩大影响的占位符将动态地添加到网格和结构如下所示：
1 2 3 4 | <div class="placeholder"> <div class="front"><!-- content of clicked grid item --></div> <div class="back"></div></div> |
让我们看看一些关键的样式。
网格-换行将带有角度的元素
1 2 3 4 5 6 7 | .grid-wrap { margin: 10px auto 0; max-width: 1090px; width: 100%; padding: 0; perspective: 1500px;} |
网格将会有一个过渡，我们需要将保留 3d变换样式分配给它，因为我们想要能够旋转它的孩子在 3D：
1 2 3 4 5 | .grid { position: relative; transition: all 0.5s cubic-bezier(0,0,0.25,1); transform-style: preserve-3d;} |
当我们单击网格项时，我们将类视图-全部添加到这将使我们移动的网格的网格：
1 2 3 | .view-full .grid { transform: translateZ(-1500px);} |
当我们点击网格项目，我们会让它淡出：
1 2 3 | .grid figure.active { opacity: 0;} |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery设计工具包Response
- 下一个特效： jQuery日期时间插件Datepair