-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
128 lines (126 loc) · 4.92 KB
/
style.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
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 * {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 2000;
-moz-perspective: 2000px;
transform-style : preserve-3d;
perspective: 2000px;
}
.book3D
{
position : absolute;
/*left : 50%;*/
top : 50px;
width : 600px;
height : 600px;
-webkit-perspective-origin : 50% 50%;
-moz-perspective-origin : 50% 50%;
-ms-perspective-origin : 50% 50%;
perspective-origin : 50% 50%;
padding : 0;
border : none;
background-color : transparent;
-webkit-transform: rotateX( 34deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 0px ) scale3d( 1, 1, 1 );
-moz-transform: rotateX( 34deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 0px ) scale3d( 1, 1, 1 );
-ms-transform: rotateX( 34deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 0px ) scale3d( 1, 1, 1 );
transform: rotateX( 34deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 0px ) scale3d( 1, 1, 1 );
-webkit-transition: margin 1.0s linear;-moz-transition: margin 1.00 linear;-o-transition: margin 1.0s linear;transition: margin 1.0s linear;
}
.book3D.bookClose
{
margin-left: -12.5% !important;
}
.book3D.bookCloseEnd
{
margin-left: 12.5% !important;
}
.book3D>div
{
position : absolute;
height : 600px;
width : 49%;
}
.book3D>button
{
position: absolute;
bottom: 10px;
width: 10%;
right : 2%;
-webkit-transform : translate3d( 0px, 0px, 20px );
-moz-transform : translate3d( 0px, 0px, 20px );
-ms-transform : translate3d( 0px, 0px, 20px );
transform : translate3d( 0px, 0px, 20px );
}
.book3D>button[data-origin="previous"]
{
left : 1%;
}
.book3D img
{
width : 60%;
}
.book3D>.page>div>img
{
width: 100%;
}
.book3D>.page
{
-webkit-transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
-moz-transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
-ms-transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
-webkit-transition: all .4s linear;-moz-transition: all .44 linear;-o-transition: all .4s linear;transition: all .4s linear;
margin-left: 25%;
}
.book3D>.page>.front,
.book3D>.page>.back
{
position : absolute;
width : 100%;
height : 100%;
background-size : 100% 100%;
color : black;
background-image : url( 'img/front.jpg' );
}
.book3D>.page>div>*:first-child
{
margin-top : 10%;
}
.book3D>.page>div>h2,
.book3D>.page>div>div,
.book3D>.page>div>p
{
margin : 10px;
padding : 5px;
border-radius : 3px;
background-color : rgba( 226, 226, 226, 0.72 );
color : black;
}
.book3D>.page>.front
{
-webkit-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 5px ) scale3d( 1, 1, 1 );
-moz-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 5px ) scale3d( 1, 1, 1 );
-ms-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 5px ) scale3d( 1, 1, 1 );
transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 1px ) scale3d( 1, 1, 1 );
}
.book3D>.page>.back
{
background-image: url( 'img/back.jpg' );
-webkit-transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 5px ) scale3d( 1, 1, 1 );
-moz-transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 5px ) scale3d( 1, 1, 1 );
-ms-transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 5px ) scale3d( 1, 1, 1 );
transform : rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) translate3d( 0px, 0px, 1px ) scale3d( 1, 1, 1 );
}
.book3D>.page.pageRight
{
-webkit-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
-moz-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
-ms-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 0px ) scale3d( 1, 1, 1 );
}
.book3D>.page.pageRight.poff
{
-webkit-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 3px ) scale3d( 1, 1, 1 );
-moz-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 3px ) scale3d( 1, 1, 1 );
-ms-transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 3px ) scale3d( 1, 1, 1 );
transform : rotateX( 0deg ) rotateY( 180deg ) rotateZ( 0deg ) translate3d( -50%, 0px, 3px ) scale3d( 1, 1, 1 );
}