jaroslav@49
|
1 |
/**
|
jaroslav@49
|
2 |
* The MIT License (MIT)
|
jaroslav@49
|
3 |
*
|
jaroslav@49
|
4 |
* Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
|
jaroslav@49
|
5 |
*
|
jaroslav@49
|
6 |
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
jaroslav@49
|
7 |
* of this software and associated documentation files (the "Software"), to deal
|
jaroslav@49
|
8 |
* in the Software without restriction, including without limitation the rights
|
jaroslav@49
|
9 |
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
jaroslav@49
|
10 |
* copies of the Software, and to permit persons to whom the Software is
|
jaroslav@49
|
11 |
* furnished to do so, subject to the following conditions:
|
jaroslav@49
|
12 |
*
|
jaroslav@49
|
13 |
* The above copyright notice and this permission notice shall be included in
|
jaroslav@49
|
14 |
* all copies or substantial portions of the Software.
|
jaroslav@49
|
15 |
*
|
jaroslav@49
|
16 |
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
jaroslav@49
|
17 |
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
jaroslav@49
|
18 |
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
jaroslav@49
|
19 |
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
jaroslav@49
|
20 |
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
jaroslav@49
|
21 |
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
jaroslav@49
|
22 |
* THE SOFTWARE.
|
jaroslav@49
|
23 |
*/
|
jaroslav@49
|
24 |
/** chess cube style **/
|
jaroslav@49
|
25 |
|
jaroslav@49
|
26 |
#chesscube {
|
jaroslav@49
|
27 |
margin: 1em auto;
|
jaroslav@49
|
28 |
-webkit-perspective: 1200px;
|
jaroslav@49
|
29 |
perspective: 1200px;
|
jaroslav@49
|
30 |
position: fixed;
|
jaroslav@49
|
31 |
z-index: -100;
|
jaroslav@49
|
32 |
bottom:100px;
|
jaroslav@49
|
33 |
right: 100px;
|
jaroslav@49
|
34 |
width: 160px;
|
jaroslav@49
|
35 |
height: 160px;
|
jaroslav@49
|
36 |
transition: opacity 1s;
|
jaroslav@49
|
37 |
}
|
jaroslav@49
|
38 |
|
jaroslav@49
|
39 |
#spinner div {
|
jaroslav@49
|
40 |
position: fixed;
|
jaroslav@49
|
41 |
width: 160px;
|
jaroslav@49
|
42 |
height: 160px;
|
jaroslav@49
|
43 |
border: 1px solid #ccc;
|
jaroslav@49
|
44 |
background: rgba(255,255,155,0.8);
|
jaroslav@49
|
45 |
text-align: center;
|
jaroslav@49
|
46 |
line-height: 160px;
|
jaroslav@49
|
47 |
font-size: 120px;
|
jaroslav@49
|
48 |
-webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
|
jaroslav@49
|
49 |
box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
|
jaroslav@49
|
50 |
}
|
jaroslav@49
|
51 |
|
jaroslav@49
|
52 |
#spinner div:nth-child(1) {
|
jaroslav@49
|
53 |
-webkit-transform: translateZ(80px);
|
jaroslav@49
|
54 |
transform: translateZ(80px);
|
jaroslav@49
|
55 |
}
|
jaroslav@49
|
56 |
#spinner div:nth-child(2) {
|
jaroslav@49
|
57 |
-webkit-transform: rotateY(90deg) translateZ(80px);
|
jaroslav@49
|
58 |
transform: rotateY(90deg) translateZ(80px);
|
jaroslav@49
|
59 |
}
|
jaroslav@49
|
60 |
#spinner div:nth-child(3) {
|
jaroslav@49
|
61 |
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
|
jaroslav@49
|
62 |
transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
|
jaroslav@49
|
63 |
}
|
jaroslav@49
|
64 |
#spinner div:nth-child(4) {
|
jaroslav@49
|
65 |
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
|
jaroslav@49
|
66 |
transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
|
jaroslav@49
|
67 |
}
|
jaroslav@49
|
68 |
#spinner div:nth-child(5) {
|
jaroslav@49
|
69 |
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
|
jaroslav@49
|
70 |
transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
|
jaroslav@49
|
71 |
}
|
jaroslav@49
|
72 |
#spinner div:nth-child(6) {
|
jaroslav@49
|
73 |
-webkit-transform: rotateX(-90deg) translateZ(80px);
|
jaroslav@49
|
74 |
transform: rotateX(-90deg) translateZ(80px);
|
jaroslav@49
|
75 |
}
|
jaroslav@49
|
76 |
|
jaroslav@49
|
77 |
@-webkit-keyframes spincube {
|
jaroslav@49
|
78 |
from,to { }
|
jaroslav@49
|
79 |
16% { -webkit-transform: rotateY(-90deg); }
|
jaroslav@49
|
80 |
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
|
jaroslav@49
|
81 |
50% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
|
jaroslav@49
|
82 |
66% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
|
jaroslav@49
|
83 |
83% { -webkit-transform: rotateX(90deg); }
|
jaroslav@49
|
84 |
}
|
jaroslav@49
|
85 |
|
jaroslav@49
|
86 |
@keyframes spincube {
|
jaroslav@49
|
87 |
from,to { }
|
jaroslav@49
|
88 |
16% { transform: rotateY(-90deg); }
|
jaroslav@49
|
89 |
33% { transform: rotateY(-90deg) rotateZ(90deg); }
|
jaroslav@49
|
90 |
50% { transform: rotateY(180deg) rotateZ(90deg); }
|
jaroslav@49
|
91 |
66% { transform: rotateY(90deg) rotateX(90deg); }
|
jaroslav@49
|
92 |
83% { transform: rotateX(90deg); }
|
jaroslav@49
|
93 |
}
|
jaroslav@49
|
94 |
|
jaroslav@49
|
95 |
#spinner {
|
jaroslav@49
|
96 |
-webkit-animation-name: spincube;
|
jaroslav@49
|
97 |
-webkit-animation-timing-function: ease-in-out;
|
jaroslav@49
|
98 |
-webkit-animation-iteration-count: infinite;
|
jaroslav@49
|
99 |
-webkit-animation-duration: 12s;
|
jaroslav@49
|
100 |
-webkit-transform-style: preserve-3d;
|
jaroslav@49
|
101 |
-webkit-transform-origin: 80px 80px 0;
|
jaroslav@49
|
102 |
animation-name: spincube;
|
jaroslav@49
|
103 |
animation-timing-function: ease-in-out;
|
jaroslav@49
|
104 |
animation-iteration-count: infinite;
|
jaroslav@49
|
105 |
animation-duration: 12s;
|
jaroslav@49
|
106 |
transform-style: preserve-3d;
|
jaroslav@49
|
107 |
transform-origin: 80px 80px 0;
|
jaroslav@49
|
108 |
}
|
jaroslav@49
|
109 |
|
jaroslav@49
|
110 |
@media (max-width: 767px) {
|
jaroslav@49
|
111 |
#chesscube {
|
jaroslav@49
|
112 |
opacity: 0;
|
jaroslav@49
|
113 |
}
|
jaroslav@49
|
114 |
}
|