-
Notifications
You must be signed in to change notification settings - Fork 4
/
core.css
110 lines (97 loc) · 2.77 KB
/
core.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
body {
margin-top: 305px;
}
@-moz-keyframes animY {
from {
-moz-transform: rotateY(0deg) rotateX(0deg);
}
to{
-moz-transform: rotateY(360deg) rotateX(360deg);
}
}
@-webkit-keyframes animY {
from {
-webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to{
-webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(90deg);
}
}
@-o-keyframes animY {
from {
-o-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to{
-o-transform: rotateY(360deg) rotateX(360deg) rotateZ(90deg);
}
}
@-ms-keyframes animY {
from {
-ms-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to{
-ms-transform:rotateY(360deg) rotateX(360deg) rotateZ(90deg);
}
}
@keyframes animY {
from {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to{
transform: rotateY(360deg) rotateX(360deg) rotateZ(90deg);
}
}
#container {
-webkit-perspective : 1000px;
-moz-perspective : 1000px;
-o-perspective : 1000px;
-ms-perspective : 1000px;
perspective : 1000px;
-webkit-perspective-origin : 50% 50%;
-moz-perspective-origin : 50% 50%;
-moz-transform-origin : 50% 50%;
-o-perspective-origin : 50% 50%;
-ms-perspective-origin : 50% 50%;
perspective-origin : 50% 50%;
}
.animateY {
-webkit-animation : animY 6s infinite linear;
-moz-animation : animY 6s infinite linear;
-o-animation : animY 6s infinite linear;
-ms-animation : animY 6s infinite linear;
animation : animY 6s infinite linear;
}
#sphere {
position: relative;
margin: 0 auto;
width: 80px;
height: 38px;
-webkit-transition : -webkit-transform 2s linear;
-moz-transition : -moz-transform 2s linear;
-o-transition : -o-transform 2s linear;
-ms-transition : -ms-transform 2s linear;
transition : transform 2s linear;
-webkit-transform-style : preserve-3d;
-moz-transform-style : preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
transform-style : preserve-3d;
}
#sphere>div {
position: absolute;
width: 72px;
height: 43px;
opacity: 0.9;
background-image: linear-gradient(right top, rgb(122,117,117) 25%, rgb(207,207,207) 78%);
background-image: -o-linear-gradient(right top, rgb(122,117,117) 25%, rgb(207,207,207) 78%);
background-image: -moz-linear-gradient(right top, rgb(122,117,117) 25%, rgb(207,207,207) 78%);
background-image: -webkit-linear-gradient(right top, rgb(122,117,117) 25%, rgb(207,207,207) 78%);
background-image: -ms-linear-gradient(right top, rgb(122,117,117) 25%, rgb(207,207,207) 78%);
background-image: -webkit-gradient(
linear,
right top,
left bottom,
color-stop(0.25, rgb(122,117,117)),
color-stop(0.78, rgb(207,207,207))
);
}