|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-02-24
日期：2012/02/23 来源:GBin1.com
今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效，这个3D特效使用CSS3的3D变化特性实现，简单而非常华丽，希望大家喜欢！ 使用3D变化，通过将它们放置于一个三维空间，我们可以让很简单元素变得更加有活力，同时使用CSS的过渡效果，这些元素可以很容易的移动到3D空间中，并且创建一个非常真实的效果。 主要的想法是创建一个轮播式的画廊，我们可以将一个图片放置在中间，旁边放置两个图片。因为我们使用不同的角度，所以看起来两张旁边的图片好像被设置在一个3D空间中，然后我们旋转它们。 注意：这里的效果需要你的浏览器支持3D变化效果 如何工作
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#">
<img src="images/1.jpg" alt="image01">
<div>http://
www.colazionedamichy.it/</div>
</a>
<a href="#">
<!-- ... -->
</a>
<!-- ... -->
</div>
<nav>
<span class="dg-prev"><</span>
<span class="dg-next">></span>
</nav>
</section>
选项current : 0, // index of current item autoplay : false , // slideshow on / off interval : 2000 // time between transitions 全部代码请参考在线演示.
|
| 返回顶楼 | |
|
发表时间：2012-02-27
在火狐下用了下。效果貌似不太好
|
| 返回顶楼 | |
|
发表时间：2012-02-27
machoo 写道 在火狐下用了下。效果貌似不太好
很卡。。chrome很流畅 |
| 返回顶楼 | |
|
发表时间：2012-02-27
firefox很卡。。Chrome很流畅 。。IE下效果变了
|
| 返回顶楼 | |
|
发表时间：2012-02-28
相当给力呀～～～
|
| 返回顶楼 | |
|
发表时间：2012-02-28
当初flash 火爆就是效果炫。
现在又有flex 又有html5. 还有jquery。。。 |
| 返回顶楼 | |
|
发表时间：2012-02-28
一眼看得冗余头晕，就给点建议：
$.fixCssTransform = function( transform, css ){ return $.extend({ '-webkit-transform' : transform, '-moz-transform' : transform, '-o-transform' : transform, '-ms-transform' : transform, 'transform' : transform }, css ||{}); }; var hidden = { 'opacity': 0, 'visibility': 'hidden' }; var visible = { 'opacity': 1, 'visibility': 'visible' }; $.fixCssTransform('translateX(-450px) translateZ(-300px) rotateY(45deg)', hidden); |
| 返回顶楼 | |
|
发表时间：2012-02-28
看来不能用火狐
|
| 返回顶楼 | |
|
发表时间：2012-03-01
alert("hello world")
貌似公司网速不给力 看不了~~~ 还是回家看。。。。。 |
| 返回顶楼 | |
|
发表时间：2012-03-01
为什么我看不到效果
|
| 返回顶楼 | |
