forked from ryanlowdermilk/metro-tile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmetro-tile.css
99 lines (99 loc) · 2.8 KB
/
metro-tile.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
.metro-tile {
background-color: #D8512B;
border-color: #DC6241;
width: 232px;
height: 104px;
padding: 5px;
color: #FFF;
font-family: sans-serif;
font-size: 12px;
border-width: 3px;
border-style: solid;
cursor: default;
-webkit-transition: 0.1s all;
-moz-transition: 0.1s all;
-ms-transition: 0.1s all;
transition: 0.1s all;
}
.metro-tile-small {
width: 104px;
height: 104px;
}
.metro-tile-orange {
background-color: #D8512B;
border-color: #DC6241;
}
.metro-tile-green {
background-color: #009719;
border-color: #1A9F30;
}
.metro-tile-blue {
background-color: #2878EC;
border-color: #4396F1;
}
.metro-tile-purple {
background-color: #5636B0;
border-color: #6449B5;
}
.metro-tile-pink {
background-color: #BD1E4A;
border-color: #B93154;
}
.metro-tile-xbox-green {
background-color: #6CB71E;
border-color: #7ABD34;
}
.tile_reset {
-webkit-transform: perspective(400px) rotateY(0deg) rotateX(0deg);
-moz-transform: perspective(400px) rotateY(0deg) rotateX(0deg);
-ms-transform: perspective(400px) rotateY(0deg) rotateX(0deg);
transform: perspective(400px) rotateY(0deg) rotateX(0deg);
}
.tile_left {
-webkit-transform: perspective(400px) rotateY(-9deg);
-moz-transform: perspective(400px) rotateY(-9deg);
-ms-transform: perspective(400px) rotateY(-9deg);
transform: perspective(400px) rotateY(-9deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.tile_right {
-webkit-transform: perspective(400px) rotateY(9deg);
-moz-transform: perspective(400px) rotateY(9deg);
-ms-transform: perspective(400px) rotateY(9deg);
transform: perspective(400px) rotateY(9deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.tile_top {
-webkit-transform: perspective(400px) rotateX(9deg);
-moz-transform: perspective(400px) rotateX(9deg);
-ms-transform: perspective(400px) rotateX(9deg);
transform: perspective(400px) rotateX(9deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.tile_bottom {
-webkit-transform: perspective(400px) rotateX(-9deg);
-moz-transform: perspective(400px) rotateX(-9deg);
-ms-transform: perspective(400px) rotateX(-9deg);
transform: perspective(400px) rotateX(-9deg);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.tile_middle {
-webkit-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
-moz-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
-ms-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
border-width: 3px;
border-style:solid;
}