Photo_wall_carousel_effect/css.css at master · zwl7/Photo_wall_carousel_effect · GitHub

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 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);
}