可互动的360度超炫3D旋转立方体动画特效

所属分类:媒体-图片展示

 16761  102  查看评论 (12)
可互动的360度超炫3D旋转立方体动画特效 ie兼容10

这是一款可互动的360度超炫3D旋转立方体动画特效。用户可以使用鼠标拖动立方体来查看各个面,或者通过点击左侧的导航链接页可以切换到立方体相应的面中。

使用方法

HTML结构

<div class="container">
  <div class="inner">
    <div class="sub front"></div>
    <div class="sub left"></div>
    <div class="sub right"></div>
    <div class="sub back"></div>
    <div class="sub top"></div>
    <div class="sub bottom"></div>
    <div class="smallCube">
      <div class="side front">
        <div style="background-image:url(img/first-citadel-hero-bg.jpg);"></div>
      </div>
      <div class="side left">
        <div style="background-image:url(img/2560x14404ae8.jpg);"></div>
      </div>
      <div class="side right">
        <div style="background-image:url(img/SKINsPromotionalImage.jpg);"></div>
      </div>
      <div class="side back">
        <div style="background-image:url(img/ShipSkin_MatiguSeabeast_Caldari.jpg);"></div>
      </div>
      <div class="side top">
        <div style="background-image:url(img/Structure_Assault_Mechanics.jpg);"></div>
      </div>
      <div class="side bottom">
        <div style="background-image:url(img/emerging.jpg);"></div>
      </div>
    </div>
  </div>
</div>

该3D立方体特效使用的是一个<div>元素作为包裹容器,然后里面使用6个子<div>作为立方体的6各面,另外在立方体中还有一个小的立方体,它的6个面分别贴上不同的图片。


相关插件-图片展示

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 14219  259

jQuery画廊-least.js

jQuery画廊-least.js 类似于google图片搜索结果中的展示效果,least.js 随机和响应的JQUERY,HTML 5和CSS3画廊
  图片展示
 13917  35

jQuery支持图片放大缩小查看效果

e-smart-zoom-jquery.js插件 页面上提供了两个按钮,可以让你的图片点击放大或者缩小 当然,对于懒人来说,真是懒得点击 那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 72862  175

jquery3D旋转幻灯片插件

jquery幻灯片插件带滚动条的圆形立体图片旋转滚动
  图片展示
 19172  79

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    d. 0
    2017/8/17 10:30:25

    牛逼,我都以为是three.jsle  

    回复
    web unbroken 0
    2017/6/29 17:44:50

    找了很久,终于找到你

    回复
    0
    2017/3/22 16:27:01
    胡三猫 0
    2016/7/4 17:07:12
    kare的春天 0
    2016/5/5 20:05:38
    手机端怎么不好使? 回复
    行尸走肉 0
    2016/5/5 18:05:11
    ?岚 0
    2016/5/4 9:05:52
    有始有终 0
    2016/5/3 16:05:00
    魂牵梦绕锁你心扉〃 0
    2016/4/22 8:04:48
    scifier 0
    2016/3/31 11:03:03
    哈!我大EVE无处不在! 回复
取消回复