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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
@keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 170px;
height: 260px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
&:hover {
transform: rotateY(0deg);
}
> :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 170px;
height: 260px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 10px #666;
}
&::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 254px;
transform: translateX(142px) rotateY(90deg);
background: linear-gradient(90deg,
#fff 0%,
#f9f9f9 5%,
#fff 10%,
#f9f9f9 15%,
#fff 20%,
#f9f9f9 25%,
#fff 30%,
#f9f9f9 35%,
#fff 40%,
#f9f9f9 45%,
#fff 50%,
#f9f9f9 55%,
#fff 60%,
#f9f9f9 65%,
#fff 70%,
#f9f9f9 75%,
#fff 80%,
#f9f9f9 85%,
#fff 90%,
#f9f9f9 95%,
#fff 100%
);
}
&::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 170px;
height: 260px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 30px 10px #666;
}
}
#container {
display: flex;
flex-flow: row wrap;
padding: 0 5px 0px 5px;
div .book {
top: 15px;
left: 15px;
}
section {
width: 222px;
height: 331px;
margin: 10px;
transform-style: preserve-3d;
overflow: hidden;
position: relative;
transition: all 0.55s ease;
transform-style: preserve-3d;
.jv {
width: 444px;
height: 662px;
transition: all 0.55s ease;
background: linear-gradient( to top right, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.5) 70%);
background-position: 0 -100px;
&:hover {
background-position: -100px 0px;
transition: all 1s ease;
}
}
&:hover {
transform: scale(1.02) perspective(800px) rotateX(5deg);
}
}
}
@keyframes shine {
to {
opacity: 1;
bottom: -30%;
right: 150%;
}
}
|
