CSS + JS 实现立体照片墙轮播

92 阅读 0 评论 61 点赞

我是靠谱客的博主繁荣芝麻，这篇文章主要介绍CSS + JS 实现立体照片墙轮播，现在分享给大家，希望可以做个参考。

之前有段时间在研究 CSS3 的动画，正好看到有个立体照片墙轮播的实现效果，感觉还不错，就收藏了下来，不过一直没时间去整理，现在总算有空了，把代码贴出来，供大家参考学习。

上代码前，还是先看下效果图吧~

怎么样？还不错吧！

下面上代码：

HTML:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<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);
}

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
68
.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:

复制代码

1
2
3
4
5
6
7
8
9
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 。

转载于:https://www.cnblogs.com/lwl0812/p/6296776.html