CSS + JS 实现立体照片墙轮播
2017-01-18 15:00
399 查看
之前有段时间在研究 CSS3 的动画,正好看到有个立体照片墙轮播的实现效果,感觉还不错,就收藏了下来,不过一直没时间去整理,现在总算有空了,把代码贴出来,供大家参考学习。
上代码前,还是先看下效果图吧~
怎么样?还不错吧!
下面上代码:
HTML:
CSS:
JS:
CSS 代码中涉及了很多 CSS3 的属性,如果看不懂的话,建议先去了解下 CSS3 。
上代码前,还是先看下效果图吧~
怎么样?还不错吧!
下面上代码:
HTML:
<div class="demo-wrap"> <div class="photos" id="photos"> <div class="photo"><img src="images/05_01.png"></div> <div class="photo"><img src="images/05_02.png"></div> <div class="photo"><img src="images/05_03.png"></div> <div class="photo"><img src="images/05_04.png"></div> <div class="photo"><img src="images/05_05.png"></div> <div class="photo"><img src="images/05_06.png"></div> <div class="photo"><img src="images/05_07.png"></div> <div class="photo"><img src="images/05_08.png"></div> </div> </div>
CSS:
.demo-wrap { width: 900px; min-height: 100px; margin-left: auto; margin-right: auto; padding: 100px 50px; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; position: relative; top: 0; } .demo-wrap .photos { width: 128px; height: 100px; margin-left: -64px; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; left: 50%; } .demo-wrap .photos .photo { position: absolute; bottom: 0; width: 128px; height: 80px; } .demo-wrap .photos .photo img { width: 100%; height: 100%; } .demo-wrap .photos .photo:nth-child(1) { background: #FCDBDB; transform: rotateY(0) translateZ(194.5px); //rotate 一定要写在前面!这里是一个坑,有兴趣的同学可以去看下为什么 } .demo-wrap .photos .photo:nth-child(2) { background: #F8C8AD; transform: rotateY(45deg) translateZ(194.5px); } .demo-wrap .photos .photo:nth-child(3) { background: #EBF48D; transform: rotateY(90deg) translateZ(194.5px); } .demo-wrap .photos .photo:nth-child(4) { background: #62E2BA; transform: rotateY(135deg) translateZ(194.5px); } .demo-wrap .photos .photo:nth-child(5) { background: #887FF2; transform: rotateY(180deg) translateZ(194.5px); } .demo-wrap .photos .photo:nth-child(6) { background: #F68CF1; transform: rotateY(225deg) translateZ(194.5px); } .demo-wrap .photos .photo:nth-child(7) { background: #F9465F; transform: rotateY(270deg) translateZ(194.5px); } .demo-wrap .photos .photo:nth-child(8) { background: #5DD21A; transform: rotateY(315deg) translateZ(194.5px); }
JS:
var photoWrap = document.getElementById("photos"); var photo = document.getElementsByClassName("photo"); var deg = 0; photoWrap.addEventListener("click", function(e) { var deg2 = 360 / photo.length; deg += deg2; this.style.webkitTransform = "rotateY(" + deg + "deg)"; });
CSS 代码中涉及了很多 CSS3 的属性,如果看不懂的话,建议先去了解下 CSS3 。
相关文章推荐
- JS 实现3D立体效果的首页轮播图(瞬间让你的网站高大上,逼格满满)
- css和js实现最简单的轮播图效果
- JS+CSS 实现轮播图 (一)
- html+css+js简单实现图片轮播效果
- 基于Angular-animate.js和css实现的轮播图
- 纯css,js原生,js原型,jquery四种方式实现轮播图效果
- html+css+js实现原生轮播特效
- 鼠标浮动过按钮实现立体按钮的效果哦,不需要用JS~~~纯CSS
- 原生js和css实现图片轮播效果
- HTML+CSS+JS实现轮播效果
- JS+HTML+CSS实现轮播效果
- 无缝轮播图的实现对比---CSS3版, JS版
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 基于cssSlidy.js插件实现响应式手机图片轮播效果
- 基于css和js的轮播效果图实现
- [精彩视频分享]JS+CSS实现的轮播效果图
- css+js实现banner图片轮播
- 用CSS+JS实现的进度条效果效果
- Js + Css的msn式的popup提示窗口的实现
- 用js实现的抽象CSS圆角效果!!