3D多角度翻转圆形幻灯片

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

253574

发布于 22 条评论

今天就为大家分享一个简单而有趣的3D多角度翻转圆形幻灯片，这是一个实验性的小插件，会根据你鼠标在圆圈内的位置（顶部、中部和底部），出现相对应的导航箭头，当点击导航箭头时，圆圈内的图片会出现3D翻转效果，而翻转角度会随着你点击的位置而不同。这个插件的效果非常的酷和有趣，希望可以运用到我们的项目中。一起先来看看demo吧。

3d-flip-round-slide

查看预览下载附件

这个幻灯片的结构看起来像是这样子的：

<div id="fc-slideshow" class="fc-slideshow">
    <ul class="fc-slides">
        <li><img src="images/1.jpg" /><h3>Hot</h3></li>
        <li><img src="images/2.jpg" /><h3>Cold</h3></li>
        <li><img src="images/3.jpg" /><h3>Light</h3></li>
        <li><img src="images/4.jpg" /><h3>Dark</h3></li>
        <li><img src="images/5.jpg" /><h3>Soft</h3></li>
        <li><img src="images/6.jpg" /><h3>Hard</h3></li>
        <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
        <li><img src="images/8.jpg" /><h3>Rough</h3></li>
    </ul>
</div>

但我们需要把它改成：

<div id="fc-slideshow" class="fc-slideshow">

    <ul class="fc-slides">
        <!-- ... -->
    </ul>

    <nav>
        <div class="fc-left">
            <span></span>
            <span></span>
            <span></span>
            <i class="icon-arrow-left"></i>
        </div>
        <div class="fc-right">
            <span></span>
            <span></span>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
    </nav>

    <div class="fc-flip">
        <div class="fc-front">
            <div><img src="images/4.jpg"><h3>Dark</h3></div>
            <div class="fc-overlay-light"></div>
        </div>
        <div class="fc-back">
            <div><img src="images/5.jpg"><h3>Soft</h3></div>
            <div class="fc-overlay-dark"></div>
        </div>
    </div>

</div>

<nav>元素含有一些空的<span>标签，是用来作为检查区域的，在圆圈的每一侧将会有三个地方可以点击，一个在顶部，一个在中间，最后一个则是在底部。根据我们鼠标停留在哪一个<span>标签上来显示相对应的导航箭头以及幻灯片翻转时的开始角度。

在这个圆圈内的图片在翻转时将会出现3D的三维结构：有正面和反面。当导航链接到下一个或者上一个图片时，会显示出3D的一个翻转效果。

我们还可以结合的光影知识，给幻灯片添加一些阴影和高光效果，使整个幻灯片在翻转时更加的逼真。其实现手段主要是通过透明度来控制的，而不透明度的取值取决于翻转的角度。

简单调用插件方式：

$( '#fc-slideshow' ).flipshow();

设置插件的基本参数：

// the options
$.Flipshow.defaults = {
    // default transition speed (ms)
    speed : 700,
    // default transition easing
    easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

查看预览下载附件

请注意，这是一个实验性的插件，还需要浏览器支持CSS 3d transforms标签。而在不支持的浏览器中，将只会显示和隐藏上一个下一个图片，不会拥有3D翻转效果。

希望你能喜欢这个小插件。

译文：codrops

相关推荐

全部评论 / 22

  1. 这个效果碉堡了，一定要想办法应用一下。

    潜行者m 2013-01-29
    20

  2. 主题有点花花

    Musk 2013-01-29
    19

  3. 不错，写的非常不错！

    周瑞彬 2013-01-29
    18

  4. 新年到了，博客不停更，谢若尧在这给您拜年了！

    谢若尧 2013-01-29
    17
    1. Javin

      同乐，祝身体健康，万事如意。

      1号 Javin 2013-01-29

  5. 春节快乐，博主一年辛苦了

    我的名字叫麒 2013-01-29
    16
    1. Javin

      同乐

      1号 Javin 2013-01-29

  6. 来学习一下，大力支持

    藏章博客 2013-01-29
    15

  7. 如果所有浏览器都支持就好了，我用搜狗好像看不来效果呢！

    服装搭配 2013-01-29
    14

  8. 博主你好，有意在贵站购买文字链接，有意请添加qq：1375751312详谈，谢谢。

    印象北角 2013-01-29
    13
    1. Javin

      本站不卖链接哦，抱歉。

      1号 Javin 2013-01-29

  9. 很给力，楼主是学动画的？玛雅？

    C/C++程序员之家 2013-01-29
    12
    1. Javin

      不是动画方向的，没有学过Maya。

      1号 Javin 2013-01-29

      1. 欧

        C/C++程序员之家 2013-01-29

  10. 网站的响应式布局不错 :roll:

    酷鸟 2013-01-29
    11

  11. 网站设计很漂亮！支持

    微图秀 2013-01-29
    10
    1. Javin

      感谢支持 :smile:

      1号 Javin 2013-01-29

  12. 还不错，但是圆形的图片好像不太适合博客。。弄成logo应该还蛮好玩的

    大发 2013-01-29
    9
    1. Javin

      只要有创意，总会用得到的。(^-^)

      1号 Javin 2013-01-29

  13. 好漂亮的博客啊

    哼哼猪 2013-01-29
    8

  14. 哎呀，貌似看不到效果

    予沐 2013-01-29
    7
    1. Javin

      在谷歌和火狐是没问题的，如果看不到效果可能是版本太低了

      1号 Javin 2013-01-29