官方学习交流QQ群：&&&&站长QQ：
提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
HTML5+css3+jquery制作的立体3D照片墙特效代码
内容介绍HTML5+css3+jquery制作的立体3D照片墙，使用鼠标拖拽，能看到3D旋转效果，点击相片，相片能放大，移近。点击右上角的&HTML5 3D相册&，会弹出首页按钮，箭头会旋转。本相册使用了HTML5的画布技术，仅支持谷歌或火狐等浏览器。
下载资源：168 次
下载积分：0 分
转载请注明（B5教程网）原文链接：
网友评论：html5+css3技术实现3D网页内容上下左右四个方向滚动切换特效
html5+css3技术实现3D网页内容上下左右四个方向滚动切换特效脚本简介：
REVEAL.JS的演示实例，3D幻灯片，一个HTML5+CSS3技术的3D网页内容切换特效，查看本效果请在支持CSS3/HTML5标签的浏览器下运行，比如IE9、火狐、Chrome等，ie8不支持本效果。 当你打开网页后,看到灰色背景，右下角会出现一个控制按钮，可上下左右控制网页向四个方向滚动切换，视觉集中在页面中央每次切换都是以滚动的方式进行;页面不要太震撼，效果不要太绚丽，本人是陪奢华3D界面所征服，前端特效设计师可以参考下啊
下载地址：
解压密码：www.jb51.net 就是本站主域名，希望大家看清楚。
推荐使用 [
] 下载，使用 [
] 以上版本解压本站脚本。
如果这个脚本总是不能下载的请在评论中留言,我们会尽快修复，谢谢!
下载本站资源，如果服务器暂不能下载请过一段时间重试!
如果遇到什么问题，请评论留言，我们定会解决问题，谢谢大家支持!
本站提供的一些商业脚本是供学习研究之用，如用于商业用途，请购买正版。
本站提供的html5+css3技术实现3D网页内容上下左右四个方向滚动切换特效资源来源互联网，版权归该下载资源的合法拥有者所有。
不知如何下载的，可以查看css transform 3D幻灯片特效
[javascript]
$(function(){&
&&& var length = $(&.container a&).&
&&& var $items = $(&.container a&);&
&&& $items.on(&transitionend&, function(event){&
&&&&&&& $items.removeClass(&trans&);&
&&& $(&.container a&).each(function(index, value){&
&&&&&&& var $child = $(this);&
&&&&&&& if (index === 0) {&
&&&&&&&&&&& $child.addClass(&current showing&);&
&&&&&&& } else if (index === 1) {&
&&&&&&&&&&& $child.addClass(&left showing&);&
&&&&&&& } else if (index == 2) {&
&&&&&&&&&&& $child.addClass(&out-left&);&
&&&&&&& } else if (index == (length - 2)) {&
&&&&&&&&&&& $child.addClass(&out-right&);&
&&&&&&& } else if (index === (length - 1)) {&
&&&&&&&&&&& $child.addClass(&right showing&);&
&&&&&&& } else {&
&&&&&&&&&&& $child.addClass(&hiding&);&
&&&&&&& };&
&&&&&&&&&&&&&
&&&&&&& $child.click(function(){&
&&&&&&&&&&& var $item = $(this);&
&&&&&&&&&&& //next item&&&
&&&&&&&&&&& var $nextItem = (index === (length - 1)) ?& $items.eq(0) : $items.eq(index + 1);&
&&&&&&&&&&& //previous item&&
&&&&&&&&&&& var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);&
&&&&&&&&&&& var $rightI&
&&&&&&&&&&& if(index == 0){&
&&&&&&&&&&&&&&& $rightItem = $items.eq(length - 2);&
&&&&&&&&&&& } else if (index == 1) {&
&&&&&&&&&&&&&&& $rightItem = $items.eq(length - 1);&
&&&&&&&&&&& } else {&
&&&&&&&&&&&&&&& $rightItem = $items.eq(index - 2);&
&&&&&&&&&&& }&
&&&&&&&&&&& var $leftI&
&&&&&&&&&&& if(index == length - 2){&
&&&&&&&&&&&&&&& $leftItem = $items.eq(0);&
&&&&&&&&&&& } else if (index == length - 1) {&
&&&&&&&&&&&&&&& $leftItem = $items.eq(1);&
&&&&&&&&&&& } else {&
&&&&&&&&&&&&&&& $leftItem = $items.eq(index + 2);&
&&&&&&&&&&& }&
&&&&&&&&&&& //current item click,return&&
&&&&&&&&&&& if ($item.hasClass(&current&)) {&
&&&&&&&&&&&&&&&&
&&&&&&&&&&& } else if ($item.hasClass(&left&)) {&
&&&&&&&&&&&&&&& //center move right&&
&&&&&&&&&&&&&&& $preItem.attr(&class&,&trans right showing&);&
&&&&&&&&&&&&&&& //left move center&&
&&&&&&&&&&&&&&& $item.attr(&class&,&trans current showing&);&
&&&&&&&&&&&&&&& //right item move out&&
&&&&&&&&&&&&&&& $rightItem.attr(&class&,&trans out-right&);&
&&&&&&&&&&&&&&& //next move left&&
&&&&&&&&&&&&&&& $nextItem.attr(&class&,&trans left showing&);&
&&&&&&&&&&&&&&& //left ready&&
&&&&&&&&&&&&&&& $leftItem.attr(&class&,&out-left&);&
&&&&&&&&&&& } else if ($item.hasClass(&right&)) {&
&&&&&&&&&&&&&&& //center move left&&
&&&&&&&&&&&&&&& $nextItem.attr(&class&,&trans left showing&);&
&&&&&&&&&&&&&&& //right move center&&
&&&&&&&&&&&&&&& $item.attr(&class&,&trans current showing&);&
&&&&&&&&&&&&&&& //left item clear&&
&&&&&&&&&&&&&&& $leftItem.attr(&class&,&trans out-left&);&
&&&&&&&&&&&&&&& //previous move right&&
&&&&&&&&&&&&&&& $preItem.attr(&class&,&trans right showing&);&
&&&&&&&&&&&&&&& //right ready&&
&&&&&&&&&&&&&&& $rightItem.attr(&class&,&out-right&);&
&&&&&&&&&&& };&
&&&&&&& });&
$(function(){
&var length = $(&.container a&).
&var $items = $(&.container a&);
&$items.on(&transitionend&, function(event){
&&$items.removeClass(&trans&);
&$(&.container a&).each(function(index, value){
&&var $child = $(this);
&&if (index === 0) {
&&&$child.addClass(&current showing&);
&&} else if (index === 1) {
&&&$child.addClass(&left showing&);
&&} else if (index == 2) {
&&&$child.addClass(&out-left&);
&&} else if (index == (length - 2)) {
&&&$child.addClass(&out-right&);
&&} else if (index === (length - 1)) {
&&&$child.addClass(&right showing&);
&&} else {
&&&$child.addClass(&hiding&);
&&$child.click(function(){
&&&var $item = $(this);
&&&//next item
&&&var $nextItem = (index === (length - 1)) ?& $items.eq(0) : $items.eq(index + 1);
&&&//previous item
&&&var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);
&&&var $rightI
&&&if(index == 0){
&&&&$rightItem = $items.eq(length - 2);
&&&} else if (index == 1) {
&&&&$rightItem = $items.eq(length - 1);
&&&} else {
&&&&$rightItem = $items.eq(index - 2);
&&&var $leftI
&&&if(index == length - 2){
&&&&$leftItem = $items.eq(0);
&&&} else if (index == length - 1) {
&&&&$leftItem = $items.eq(1);
&&&} else {
&&&&$leftItem = $items.eq(index + 2);
&&&//current item click,return
&&&if ($item.hasClass(&current&)) {
&&&} else if ($item.hasClass(&left&)) {
&&&&//center move right
&&&&$preItem.attr(&class&,&trans right showing&);
&&&&//left move center
&&&&$item.attr(&class&,&trans current showing&);
&&&&//right item move out
&&&&$rightItem.attr(&class&,&trans out-right&);
&&&&//next move left
&&&&$nextItem.attr(&class&,&trans left showing&);
&&&&//left ready
&&&&$leftItem.attr(&class&,&out-left&);
&&&} else if ($item.hasClass(&right&)) {
&&&&//center move left
&&&&$nextItem.attr(&class&,&trans left showing&);
&&&&//right move center
&&&&$item.attr(&class&,&trans current showing&);
&&&&//left item clear
&&&&$leftItem.attr(&class&,&trans out-left&);
&&&&//previous move right
&&&&$preItem.attr(&class&,&trans right showing&);
&&&&//right ready
&&&&$rightItem.attr(&class&,&out-right&);
&&& &title&slideshow&/title&&
&&& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&
&&& &link rel=&stylesheet& type=&text/css& href=&slide.css&&&
&&& &div class=&container&&&
&&&&&&& &div class=&wapper&&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&1& /&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&2& /&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&3&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&4&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&5&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&6&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&7&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&8&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&9&/&&/a&&
&&&&&&&&&&& &a href=&javascript:void(0)&&&img src=&& alt=&10&/&&/a&&
&&&&&&& &/div&&
&&& &/div&&
&&& &script type=&text/javascript& src=&jquery-1.8.3.js&&&/script&&
&&& &script type=&text/javascript& src=&slide.js&&&/script&&
&&title&slideshow&/title&
&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&&link rel=&stylesheet& type=&text/css& href=&slide.css&&
&&div class=&container&&
&&&div class=&wapper&&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&1& /&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&2& /&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&3&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&4&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&5&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&6&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&7&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&8&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&9&/&&/a&
&&&&a href=&javascript:void(0)&&&img src=&& alt=&10&/&&/a&
&&script type=&text/javascript& src=&jquery-1.8.3.js&&&/script&
&&script type=&text/javascript& src=&slide.js&&&/script&
body,div{margin: 0;padding: 0;}&
.container{width: 100%;height: 450 position:}&
.container .wapper{margin: 0 width: 480height: 300 position:-webkit-transform-style: preserve-3d;-webkit-perspective: 1000-moz-transform-style: preserve-3d;-moz-perspective: 1000}&
.container a{display:position:left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor:}&
.container a img{width: 480height: 300display:border: 0;}&
.container .current{z-index: 2;}&
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}&
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}&
.showing{opacity: 1;visibility:}&
.hiding{opacity: 0;visibility:}&
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility:}&
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility:}&
.trans{-webkit-transition: all 1s ease-in--moz-transition: all 1s ease-in-transition: all 1s ease-in-}&
body,div{margin: 0;padding: 0;}
.container{width: 100%;height: 450 position:}
.container .wapper{margin: 0 width: 480height: 300 position:-webkit-transform-style: preserve-3d;-webkit-perspective: 1000-moz-transform-style: preserve-3d;-moz-perspective: 1000}
.container a{display:position:left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor:}
.container a img{width: 480height: 300display:border: 0;}
.container .current{z-index: 2;}
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}
.showing{opacity: 1;visibility:}
.hiding{opacity: 0;visibility:}
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility:}
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility:}
.trans{-webkit-transition: all 1s ease-in--moz-transition: all 1s ease-in-transition: all 1s ease-in-}
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。fiefox 我记着有一个看网站div的3D效果图怎么调出来？_百度知道
fiefox 我记着有一个看网站div的3D效果图怎么调出来？
提问者采纳
//b://mozilla，然后在其设置面板中开启3D模式即可，欢迎继续在本平台咨询，如有疑问.jpg" />希望我的回答对您有所帮助.cn/topic/1/" target="_blank">http：<img class="ikqb_img" src="http：<a href="http.baidu.hiphotos://b，请到火狐社区://b.com/zhidao/pic/item/43a7d933c895d143cc025aaf075e.baidu。了解更多火狐浏览器的使用小技巧.com/zhidao/wh%3D450%2C600/sign=f0ed27d40bfa513d51ff64da085d79cd/43a7d933c895d143cc025aaf075e您好.com.hiphotos！您可以使用快捷键 Ctrl+Shift+I 呼出查看器.com/zhidao/wh%3D600%2C800/sign=c88e0d2b6bacb990dc24c2/，操作节点您可以参考下图所示.hiphotos
提问者评价
已回答24623
响应时间&23小时
其他类似问题
3d效果图的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁