使用CSS3实现3D图片滑块效果

2024-04-27 14:34:30

字体：大中小

来源：转载

供稿：网友

使用CSS3实现3D图片滑块效果

　　使用CSS3 的3D变换特性，我们可以通过让元素在三维空间中变换来实现一些新奇的效果。这篇文章分享的这款 jQuery 立体图片滑块插件，利用了 3D transforms（变换）属性来实现多种不同的效果。

　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

　　实现的基本思路是创建三维图像切片，作为三维物体的另一侧，旋转并显示下一个图像。若浏览器不支持3D变换，一个简单的滑块将作为后备方案。要调用这个插件，首先把图片放在无序列表中，然后添加 CSS 类——"sb-slider" 即可，下面是 HTML代码示例：

123456789101112131415161718192021222324252627282930313233343536 <ul id="sb-slider" class="sb-slider"><li><a href="#" target="_blank"><img src="images/1.jpg" alt="image1"/></a><div class="sb-description"><h3>Creative Lifesaver</h3></div></li><li><img src="images/2.jpg" alt="image2"/><div class="sb-description"><h3>...</h3></div></li><li></li></ul>

　　另外也还可以使用带有 class 为“sb-description” 的DIV来为图片添加描述。如本例所示，您还可以在图像周围添加锚点。然后调用插件就可以了：

1	`$('#sb-slider').slicebox();`

　　Slicebox 配备了一组选项，你可以调整以实现不同类型的效果，各个选项和作用如下：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 $.Slicebox.defaults = {// 方向(v)ertical, (h)orizontal or (r)andomorientation : 'v',// 元素距离视图的距离，以像素计perspective : 1200,// 切片，长方体的数量cuboidsCount : 5,// 是否随机cuboidsRandom : false,// 长方体最大数量maxCuboidsCount : 5,disperseFactor : 0,// 隐藏滑块的颜色colorHiddenSides : '#222',sequentialFactor : 150,// 动画速度speed : 600,// 过渡效果easing : 'ease',// 自动播放autoplay : false,// 旋转间隔interval: 3000,// 淡入淡出速度fallbackFadeSpeed : 300,// 回调函数onBeforeChange : function( position ) { return false; },onAfterChange : function( position ) { return false; }};