Skip to content

Commit 5ab3ec4

Browse files
lenadgitlenadgit
committed
add a new project Animated 3D cube
1 parent d74373f commit 5ab3ec4

File tree

2 files changed

+225
-0
lines changed

2 files changed

+225
-0
lines changed

‎animated3dcube/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<link href="style.css" rel="stylesheet">
8+
<title>Stereoscopic CSS</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="stage">
13+
<figure class="cube">
14+
<span class="back">S</span>
15+
<span class="top"></span>
16+
<span class="bottom"></span>
17+
<span class="left">3D!</span>
18+
<span class="right">S</span>
19+
<span class="front">C</span>
20+
</figure>
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎animated3dcube/style.css‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
.container {
2+
margin: 0 auto;
3+
width: 960px;
4+
}
5+
6+
.left, .right {
7+
height: 100%;
8+
overflow: hidden;
9+
width: 50%;
10+
}
11+
12+
.left {
13+
float: left;
14+
}
15+
16+
.right {
17+
float: right;
18+
}
19+
20+
.left .stage {
21+
-moz-perspective-origin: 63.5% -340px;
22+
-webkit-perspective-origin: 63.5% -340px;
23+
perspective-origin: 63.5% -340px
24+
}
25+
26+
.right .stage {
27+
-moz-perspective-origin: 36.5% -340px;
28+
-webkit-perspective-origin: 36.5% -340px;
29+
perspective-origin: 36.5% -340px;
30+
}
31+
32+
.stage {
33+
width: 480px;
34+
height: 500px;
35+
margin: 10px auto;
36+
position: relative;
37+
-moz-perspective: 1600px;
38+
-webkit-perspective: 1600px;
39+
perspective: 1600px;
40+
41+
-moz-animation: introduceCube 1.5s ease-out;
42+
-webkit-animation: introduceCube 1.5s ease-out;
43+
animation: introduceCube 1.5s ease-out;
44+
}
45+
46+
.stage .cube {
47+
-moz-transform-style: preserve-3d;
48+
-webkit-transform-style: preserve-3d;
49+
transform-style: preserve-3d;
50+
-moz-transform-origin: 100px 50%;
51+
-ms-transform-origin: 100px 50%;
52+
-o-transform-origin: 100px 50%;
53+
-webkit-transform-origin: 100px 50%;
54+
transform-origin: 100px 50%;
55+
-moz-animation: rotate 10s infinite linear;
56+
-webkit-animation: rotate 10s infinite linear;
57+
animation: rotate 10s infinite linear;
58+
position: absolute;
59+
top: 120px;
60+
left: 140px; }
61+
62+
.cube span {
63+
color: white;
64+
display: block;
65+
font-size: 100px;
66+
height: 200px;
67+
line-height: 200px;
68+
opacity: 0.5;
69+
position: absolute;
70+
text-align: center;
71+
width: 200px;
72+
}
73+
.stage .back {
74+
-moz-transform: rotateY(180deg) translateZ(100px);
75+
-ms-transform: rotateY(180deg) translateZ(100px);
76+
-o-transform: rotateY(180deg) translateZ(100px);
77+
-webkit-transform: rotateY(180deg) translateZ(100px);
78+
transform: rotateY(180deg) translateZ(100px);
79+
background-color: red; }
80+
.stage .top {
81+
-moz-transform: rotateX(90deg) translateZ(100px);
82+
-ms-transform: rotateX(90deg) translateZ(100px);
83+
-o-transform: rotateX(90deg) translateZ(100px);
84+
-webkit-transform: rotateX(90deg) translateZ(100px);
85+
transform: rotateX(90deg) translateZ(100px);
86+
background-color: #ff7400; }
87+
.stage .bottom {
88+
-moz-transform: rotateX(-90deg) translateZ(100px);
89+
-ms-transform: rotateX(-90deg) translateZ(100px);
90+
-o-transform: rotateX(-90deg) translateZ(100px);
91+
-webkit-transform: rotateX(-90deg) translateZ(100px);
92+
transform: rotateX(-90deg) translateZ(100px);
93+
-moz-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
94+
-webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
95+
box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
96+
-moz-backface-visibility: visible;
97+
-webkit-backface-visibility: visible;
98+
backface-visibility: visible;
99+
background-color: #aaaaaa;
100+
-webkit-box-reflect: none; }
101+
.stage .left {
102+
-moz-transform: rotateY(-90deg) translateZ(100px);
103+
-ms-transform: rotateY(-90deg) translateZ(100px);
104+
-o-transform: rotateY(-90deg) translateZ(100px);
105+
-webkit-transform: rotateY(-90deg) translateZ(100px);
106+
transform: rotateY(-90deg) translateZ(100px);
107+
background-color: #009999; }
108+
.stage .right {
109+
-moz-transform: rotateY(90deg) translateZ(100px);
110+
-ms-transform: rotateY(90deg) translateZ(100px);
111+
-o-transform: rotateY(90deg) translateZ(100px);
112+
-webkit-transform: rotateY(90deg) translateZ(100px);
113+
transform: rotateY(90deg) translateZ(100px);
114+
background-color: #00cc00; }
115+
.stage .front {
116+
-moz-transform: translateZ(100px);
117+
-ms-transform: translateZ(100px);
118+
-o-transform: translateZ(100px);
119+
-webkit-transform: translateZ(100px);
120+
transform: translateZ(100px);
121+
background-color: yellow; }
122+
123+
@-moz-keyframes rotate {
124+
0% {
125+
-moz-transform: rotateY(0);
126+
transform: rotateY(0); }
127+
128+
100% {
129+
-moz-transform: rotateY(-360deg);
130+
transform: rotateY(-360deg); } }
131+
@-webkit-keyframes rotate {
132+
0% {
133+
-webkit-transform: rotateY(0);
134+
transform: rotateY(0); }
135+
136+
100% {
137+
-webkit-transform: rotateY(-360deg);
138+
transform: rotateY(-360deg); } }
139+
@keyframes rotate {
140+
0% {
141+
-moz-transform: rotateY(0);
142+
-ms-transform: rotateY(0);
143+
-o-transform: rotateY(0);
144+
-webkit-transform: rotateY(0);
145+
transform: rotateY(0); }
146+
147+
100% {
148+
-moz-transform: rotateY(-360deg);
149+
-ms-transform: rotateY(-360deg);
150+
-o-transform: rotateY(-360deg);
151+
-webkit-transform: rotateY(-360deg);
152+
transform: rotateY(-360deg); } }
153+
@-moz-keyframes introduceCube {
154+
0% {
155+
opacity: 0;
156+
top: -20px;
157+
-moz-transform: scale(0.6);
158+
transform: scale(0.6); }
159+
160+
20% {
161+
opacity: 1; }
162+
163+
100% {
164+
top: 0;
165+
-moz-transform: scale(1);
166+
transform: scale(1); } }
167+
@-webkit-keyframes introduceCube {
168+
0% {
169+
opacity: 0;
170+
top: -20px;
171+
-webkit-transform: scale(0.6);
172+
transform: scale(0.6); }
173+
174+
20% {
175+
opacity: 1; }
176+
177+
100% {
178+
top: 0;
179+
-webkit-transform: scale(1);
180+
transform: scale(1); } }
181+
@keyframes introduceCube {
182+
0% {
183+
opacity: 0;
184+
top: -20px;
185+
-moz-transform: scale(0.6);
186+
-ms-transform: scale(0.6);
187+
-o-transform: scale(0.6);
188+
-webkit-transform: scale(0.6);
189+
transform: scale(0.6); }
190+
191+
20% {
192+
opacity: 1; }
193+
194+
100% {
195+
top: 0;
196+
-moz-transform: scale(1);
197+
-ms-transform: scale(1);
198+
-o-transform: scale(1);
199+
-webkit-transform: scale(1);
200+
transform: scale(1); }
201+
}

0 commit comments

Comments
 (0)