forked from rpsthecoder/3d-button-flip
/
style.css
127 lines (119 loc) · 2.87 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
#gridWrapper{
margin: auto;
height: 500px;
width: 500px;
font-family: "bookman old style";
}
p{
font-size: 10pt;
}
.misc
{
font-size: 9pt;
}
h2{
margin-bottom: 0;
}
a:link{
color:#0095DD;
}
.flipBtnWrapper{
width: 40%;
height: 40%;
position: relative;
float: left;
margin: 6% 4%;
}
.flipBtn, .flipBtn_checkbox, .flipBtn_face{
position: absolute;
width: 100%;
height: 100%;
}
.flipBtn {
transition: transform 2s;
transform-style: preserve-3d;
pointer-events: none;
box-shadow: 0px 0px 4px #C7C7C7;
}
.flipBtnWrapper:hover > .flipBtn{
box-shadow: 0px 0px 4px #828282;
}
.flipBtn_back{
transform: translateZ( -10px );
}
.flipBtn_front{
transform: translateZ( 10px );
backface-visibility: hidden;
}
.flipBtn_back, .flipBtn_front{
background-repeat: no-repeat;
background-position: center;
}
.flipBtn_checkbox{
opacity: 0;
cursor: pointer;
}
/* Demo No 1 */
.flipBtn_front.demo1{
background-image: url("image/css-3d-flip-button-animation-play.png"), linear-gradient(#FF6366 50%, #FEA56E);
}
.flipBtn_back.demo1{
background-image: url("image/css-3d-flip-button-animation-pause.png"), linear-gradient(#FF6366 50%, #FEA56E);
}
.flipBtn_mid.demo1{
height: 20px;
background-color: #d5485a;
transform: rotateX(90deg);
top: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo1{
transform: rotateX( -180deg );
}
/* Demo No 2 */
.flipBtn_front.demo2{
background-image: url("image/css-3d-flip-button-animation-close.png"), linear-gradient(#27B89B 50%, #45C765);
}
.flipBtn_back.demo2{
background-image: url("image/css-3d-flip-button-animation-open.png"), linear-gradient(#27B89B 50%, #45C765);
}
.flipBtn_mid.demo2{
height: 20px;
background-color: #34964c;
transform: rotateX(-90deg);
bottom: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo2{
transform: rotateX( 180deg );
}
/* Demo No 3 */
.flipBtn_front.demo3{
background-image: url("image/css-3d-flip-button-animation-mute.png"), linear-gradient(#27B89B 50%, #45C765);
}
.flipBtn_back.demo3{
background-image: url("image/css-3d-flip-button-animation-speaker.png"), linear-gradient(#27B89B 50%, #45C765);
}
.flipBtn_mid.demo3{
width: 20px;
background-color: #34964c;
transform: rotateY(90deg);
right: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo3{
transform: rotateY( -180deg );
}
/* Demo No 4 */
.flipBtn_front.demo4{
background-image: url("image/css-3d-flip-button-animation-minus.png"), linear-gradient(#FF6366 50%, #FEA56E);
}
.flipBtn_back.demo4{
background-image: url("image/css-3d-flip-button-animation-plus.png"), linear-gradient(#FF6366 50%, #FEA56E);
}
.flipBtn_mid.demo4{
width: 20px;
background-color: #d5485a;
transform: rotateY(-90deg);
left: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo4{
transform: rotateY( 180deg );
}