CSS + JS 实现立体照片墙轮播
之前有段时间在研究 CSS3 的动画,正好看到有个立体照片墙轮播的实现效果,感觉还不错,就收藏了下来,不过一直没时间去整理,现在总算有空了,把代码贴出来,供大家参考学习。
上代码前,还是先看下效果图吧~
怎么样?还不错吧!
下面上代码:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 | < 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | .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 1 s; -moz-transition: -moz-transform 1 s; transition: transform 1 s; -webkit-transform-style: preserve -3 d; -moz-transform-style: preserve -3 d; transform-style: preserve -3 d; 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( 45 deg) translateZ( 194.5px ); } .demo-wrap .photos .photo:nth-child( 3 ) { background : #EBF48D ; transform: rotateY( 90 deg) translateZ( 194.5px ); } .demo-wrap .photos .photo:nth-child( 4 ) { background : #62E2BA ; transform: rotateY( 135 deg) translateZ( 194.5px ); } .demo-wrap .photos .photo:nth-child( 5 ) { background : #887FF2 ; transform: rotateY( 180 deg) translateZ( 194.5px ); } .demo-wrap .photos .photo:nth-child( 6 ) { background : #F68CF1 ; transform: rotateY( 225 deg) translateZ( 194.5px ); } .demo-wrap .photos .photo:nth-child( 7 ) { background : #F9465F ; transform: rotateY( 270 deg) translateZ( 194.5px ); } .demo-wrap .photos .photo:nth-child( 8 ) { background : #5DD21A ; transform: rotateY( 315 deg) translateZ( 194.5px ); } |
JS:
1 2 3 4 5 6 7 8 | 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 。
文小白滴笔记~~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步