Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 429 lines (392 sloc) 11.943 kb
9201a2f @jcreus First post
authored
1 <!doctype html>
2 <html>
3 <head>
4 <title>CSS3</title>
5 <style>
6 body {
7 height:100%;
8 box-sizing:border-box;
9 -webkit-box-sizing:border-box;
10 padding:0px;
11 margin:0px;
12 font-family:sans-serif;
13 }
14 #experiment {
15 -webkit-perspective: 800;
16 -webkit-perspective-origin: 300px 300px;
17 -moz-perspective: 800px;
18 -moz-perspective-origin: 300px 300px;
19 position:absolute;
20 width:100%;
21 height:100%;
22 }
23
24 body > * {
25 -webkit-touch-callout: none;
26 -webkit-user-select: none;
27 -khtml-user-select: none;
28 -moz-user-select: none;
29 -ms-user-select: none;
30 -o-user-select: none;
31 user-select: none;
32 }
33 a {
34 -webkit-touch-callout: auto !important;
35 -webkit-user-select: auto !important;
36 -khtml-user-select: auto !important;
37 -moz-user-select: auto !important;
38 -ms-user-select: auto !important;
39 -o-user-select: auto !important;
40 user-select: auto !important;
41 z-index:999999;
42 }
43
44 .cube {
45 position: relative;
46 height: 600px;
47 width: 600px;
48 -webkit-transform-style: preserve-3d;
49 -webkit-transition: -webkit-transform 2s linear;
50 -moz-transition: -moz-transform 2s linear;
51 -moz-transform-style: preserve-3d;
52 -moz-transform:translateZ(-300px);
53 -webkit-transform:translateZ(-300px);
54 }
55
56 .face {
57 position: absolute;
58 padding: 20px;
59 background-color: rgba(0,66,66, 0.85);
60 font-size:150%;
61 line-height: 150%;
62 color: #fff;
63 border: 1px solid #555;
64 margin:0px;
65 overflow:hidden;
66 width:560px;
67 height:560px;
68 text-align:justify;
69 }
70
71 .cube .one {
72 -webkit-transform: rotateX(90deg) translateZ(300px);
73 -moz-transform: rotateX(90deg) translateZ(300px);
74 }
75
76 .cube .two {
77 -webkit-transform: translateZ(300px);
78 -moz-transform: translateZ(300px);
79 }
80
81 .cube .three {
82 -webkit-transform: rotateY(90deg) translateZ(300px);
83 -moz-transform: rotateY(90deg) translateZ(300px);
84 }
85
86 .cube .four {
87 -webkit-transform: rotateY(180deg) translateZ(300px);
88 -moz-transform: rotateY(180deg) translateZ(300px);
89 }
90
91 .cube .five {
92 -webkit-transform: rotateY(-90deg) translateZ(300px);
93 -moz-transform: rotateY(-90deg) translateZ(300px);
94 }
95
96 .cube .six {
97 -webkit-transform: rotateX(-90deg) translateZ(300px);
98 -moz-transform: rotateX(-90deg) translateZ(300px);
99 }
100 .ingrid {
101 text-align:center;
102 height:200px;
0bea188 @jcreus commiting
authored
103 width:280px;
9201a2f @jcreus First post
authored
104 line-height:200px;
105 border:1px solid black;
106 background-image: linear-gradient(right bottom, rgb(86,118,173) 30%, rgb(180,187,212) 70%);
107 background-image: -o-linear-gradient(right bottom, rgb(86,118,173) 30%, rgb(180,187,212) 70%);
108 background-image: -moz-linear-gradient(right bottom, rgb(86,118,173) 30%, rgb(180,187,212) 70%);
109 background-image: -webkit-linear-gradient(right bottom, rgb(86,118,173) 30%, rgb(180,187,212) 70%);
110 background-image: -ms-linear-gradient(right bottom, rgb(86,118,173) 30%, rgb(180,187,212) 70%);
111
112 background-image: -webkit-gradient(
113 linear,
114 right bottom,
115 left top,
116 color-stop(0.3, rgb(86,118,173)),
117 color-stop(0.7, rgb(180,187,212))
118 );
119 opacity:0.5;
120 -webkit-transition: -webkit-transform 2s linear;
121 -moz-transition: -moz-transform 2s linear;
122 -moz-border-radius:5px;
123 -webkit-border-radius:5px;
124 border-radius:5px;
125 }
126 #tot {
127 -webkit-transition: opacity 1s linear;
128 -moz-transition: opacity 1s linear;
129 opacity:0;
130 }
131 @keyframes anim {
132 0% { transform:rotateY(-15deg); }
133 50% { transform:rotateY(15deg); }
134 100% { transform:rotateY(-15deg); }
135 }
136 @-webkit-keyframes anim {
137 0% { -webkit-transform:rotateY(-15deg); }
138 10% { -webkit-transform:rotateY(0deg); }
139 40% { -webkit-transform:rotateY(0deg); }
140 50% { -webkit-transform:rotateY(15deg); }
141 60% { -webkit-transform:rotateY(0deg); }
142 90% { -webkit-transform:rotateY(0deg); }
143 100% { -webkit-transform:rotateY(-15deg); }
144 }
145 @-moz-keyframes anim {
146 0% { -moz-transform:rotateY(-15deg); }
147 10% { -moz-transform:rotateY(0deg); }
148 40% { -moz-transform:rotateY(0deg); }
149 50% { -moz-transform:rotateY(15deg); }
150 60% { -moz-transform:rotateY(0deg); }
151 90% { -moz-transform:rotateY(0deg); }
152 100% { -moz-transform:rotateY(-15deg); }
153 }
154
155 #grid {
156 -moz-animation:anim 5s infinite;
157 -webkit-animation:anim 5s infinite;
158 -webkit-transform-style: preserve-3d;
0bea188 @jcreus commiting
authored
159 width:610px;
9201a2f @jcreus First post
authored
160 }
161
162 .ingrid:hover,.selected {
163 opacity:0.99;
164 }
165 .taula {
166 border:none;
167 border-spacing:15px;
168 margin:0 auto;
169 }
170 </style>
171 </head>
172 <body>
173 <div style="-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);transform:rotate(-90deg);text-align:center;font-size:45px;display:none;" id="tmb">CSS3 presentation</div>
174 <div id="nav" style="display:none;z-index:9999;">
175 <img src="enrere.svg" style="position:fixed;bottom:0px;right:0px;cursor:pointer;z-index:9999;" onclick="pres.hideCube();">
176 </div>
177 <div id="grid" class="animat">
178
179 </div>
180 <div style="position:fixed;top:50%;margin-top:-300px;left:50%;margin-left:-300px;">
181 <div id="tot" style="position:relative;z-index:1001;">
182
183 </div>
184 </div>
185 <script type="text/javascript">
186 Function.prototype.bind = function(scope) {
187 var _function = this;
188
189 return function() {
190 return _function.apply(scope, arguments);
191 }
192 }
193
194 Element.prototype.css = function (dict) {
195 for (var i in dict) {
196 if (i == "transform") {
197 var todo = ["transform","webkitTransform","MozTransform"];
198 } else {
199 var todo = [i];
200 }
201 if (i=="ptransformY") {
202 var cur = parseFloat(this.getAttribute("data-rotatey"));
203 if (!cur) var cur = 0;
204 this.style.webkitTransform = "rotateY("+(dict[i]+cur)+"deg)";
205 this.setAttribute("data-rotatey",(dict[i]+cur))
206 delete dict[i];
207 }
208 for (var y=0; y<todo.length; y++) {
209 this.style[todo[y]] = dict[i];
210 }
211 }
212 };
213 Element.prototype.hasClass = function (cls) {
214 return this.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
215 }
216
217 Element.prototype.addClass = function (cls) {
218 if (!this.hasClass(cls)) this.className += " "+cls;
219 }
220
221 Element.prototype.removeClass = function (ele,cls) {
222 if (this.hasClass(cls)) {
223 var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
224 this.className = this.className.replace(reg,' ');
225 }
226 }
227
228 Number.prototype.mod = function(n) {
229 return ((this%n)+n)%n;
230 }
231
232 pres = {};
233
234 pres.adjustheight = function () {
235 var t = document.getElementById("grid");
236 t.style.marginTop = -(t.offsetHeight/2)+"px";
237 t.style.marginLeft = -(t.offsetWidth/2)+"px";
238 t.style.top = '50%';
239 t.style.left = '50%';
240 t.style.position = 'absolute';
241 var t2 = document.getElementById("tmb");
242 t2.style.display = "block";
243 t2.style.marginTop = -(t2.offsetHeight/2)+"px";
244 t2.style.top = '50%';
245 t2.style.position = 'absolute';
246 t2.style.marginLeft = -(t2.offsetWidth/3)+"px";
247 };
248
249 window.onresize = pres.adjustheight;
250 pres.hideCube = function () {
251 document.getElementById("tot").style.opacity = 0;
252 setTimeout(function () { document.getElementById("tot").innerHTML = ""; }, 2100);
253 var all = document.getElementsByClassName("ingrid");
254 for (var i=0; i<all.length; i++) {
255 all[i].className = "ingrid";
256 }
257 document.getElementById("nav").style.display = "none";
258 document.getElementById("grid").style.pointerEvents = "auto";
0bea188 @jcreus commiting
authored
259 pres.shown = false;
9201a2f @jcreus First post
authored
260 };
0bea188 @jcreus commiting
authored
261 pres.shown = false;
9201a2f @jcreus First post
authored
262 pres.showCube = function (n) {
0bea188 @jcreus commiting
authored
263 pres.shown = true;
9201a2f @jcreus First post
authored
264 pres.reset();
265 document.getElementById("nav").style.display = "block";
266 var all = document.getElementsByClassName("ingrid");
267 for (var i=0; i<all.length; i++) {
268 if (parseInt(all[i].getAttribute("data-num"))!=n) all[i].className = "ingrid";
269 }
270 var ex = document.createElement("div");
271 ex.id = "experiment";
272 var cube = document.createElement("div");
273 cube.className = "cube";
274 ex.appendChild(cube);
275 for (var i=0; i<pres.data[n].length; i++) {
276 var face = pres.data[n][i];
277 var f = document.createElement("div");
278 var nu = ["one","two","three","four","five","six"];
279 f.className = "face "+nu[i];
280 f.innerHTML = face.childNodes[0].nodeValue;
281 cube.appendChild(f);
282 }
283 document.getElementById("tot").innerHTML = "";
284 document.getElementById("tot").appendChild(ex);
285 document.getElementById("tot").style.opacity = 1;
286 };
287
288 pres.showGrid = function () {
289 var g = document.getElementById("grid");
290 var str = document.createElement("table");
291 str.className = "taula";
292 var perrow = 2;
293 var i=0;
294 for (var y=0; y<Math.ceil(pres.names.length/perrow);y++) {console.log(Math.ceil(pres.names.length/perrow));
295 var tr = document.createElement("tr");
296 str.appendChild(tr);
297 for (var cur=0; cur<perrow; i++) {console.log(i);
298 if (!pres.names[i]) break;
299 var t = document.createElement("td");
300 t.setAttribute("data-num",i);
301 t.className = "ingrid";
302 t.appendChild(document.createTextNode(pres.names[i]));
0bea188 @jcreus commiting
authored
303 t.onclick = function () { if (!pres.shown) {
304 document.getElementById("grid").style.pointerEvents = "none"; this.className = "ingrid selected"; pres.showCube(parseInt(this.getAttribute("data-num"))); }}.bind(t);
9201a2f @jcreus First post
authored
305 tr.appendChild(t);
306 cur += 1;
307 }
308 }
309 g.appendChild(str);
310 }
311
312 pres.parseXML = function () {
313 pres.cubes = pres.xml.getElementsByTagName("cube");
314 pres.data = [];
315 pres.names = [];
316 for (var i=0; i<pres.cubes.length; i++) {
317 var faces = pres.cubes[i].getElementsByTagName("face");
318 pres.data[pres.data.length] = [];
319 for (var y=0; y<faces.length; y++) {
320 pres.data[pres.data.length-1][y] = faces[y];
321 }
322 pres.names[pres.names.length] = pres.cubes[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
323 }
324 pres.showGrid();
325 pres.adjustheight();
326 //pres.showCube(0);
327 };
328
329 pres.loadXML = function (url) {
330 var xmlhttp = new XMLHttpRequest();
331 xmlhttp.onreadystatechange = function () {
332 if (xmlhttp.readyState == 4) {
333 pres.xml = xmlhttp.responseXML;
334 pres.parseXML();
335 }
336 };
337 xmlhttp.open("GET", url, true);
338 xmlhttp.overrideMimeType('text/xml');
339 xmlhttp.send(null);
340
341 }
342
343 pres.begin = false;
344
345 pres.mouseDown = function (e) {
346 var all = document.getElementsByClassName("face");
347 for (var i=0; i<all.length; i++) {
348 all[i].addClass("noselect");
349 }
350 var x = (e.pageX != undefined) ? e.pageX : e.touches[0].pageX;
351 var y = (e.pageY != undefined) ? e.pageY : e.touches[0].pageY;
352 pres.begin = [x,y];
353 }
354
355 pres.mouseUp = function (e) {
356 console.log(e);
357 var x = (e.pageX != undefined) ? e.pageX : e.touches[0].pageX;
358 var y = (e.pageY != undefined) ? e.pageY : e.touches[0].pageY;
359 console.log(pres.begin,[x,y]);
360 if (pres.begin) {
361 if ((pres.begin[0]-x)>100) {
362 pres.keyDown({which:pres.arrow.right});
363 } else if ((pres.begin[0]-x)<-100) {
364 pres.keyDown({which:pres.arrow.left});
365 }
366 if (((pres.begin[1]-y)>100)) {
367 pres.keyDown({which:pres.arrow.up});
368 } else if ((pres.begin[1]-y)<-100) {
369 pres.keyDown({which:pres.arrow.down});
370 }
371 }
372 var all = document.getElementsByClassName("face");
373 for (var i=0; i<all.length; i++) {
374 all[i].removeClass("noselect");
375 }
376 }
377
378 pres.arrow = {left: 37, up: 38, right: 39, down: 40 };
379
380 pres.reset = function () {
381 pres.cRotateY = pres.cRotateX = pres.cRotateZ = 0;
382 }
383 pres.keyDown = function (e) {
384 var keyCode = e.keyCode || e.which;
385
386 switch (keyCode) {
387 case pres.arrow.left:console.log("left");
388 pres.cRotateY += 90;
389 break;
390 case pres.arrow.up:
391 if ((pres.cRotateY/360) != Math.round(pres.cRotateY/360)) {
392 pres.cRotateY = Math.round(pres.cRotateY/360)*360;
393 }
394
395 pres.cRotateX += 90;
396 //..
397 break;
398 case pres.arrow.right:
399 pres.cRotateY -= 90;
400 break;
401 case pres.arrow.down:
402 if ((pres.cRotateY/360) != Math.round(pres.cRotateY/360)) {
403 pres.cRotateY = Math.round(pres.cRotateY/360)*360;
404 }
405 pres.cRotateX -= 90;
406 //..
407 break;
408 }
409 var all = document.getElementsByClassName("cube");
410 for (var i=0; i<all.length; i++) {
411 all[i].css({transform:"translateZ(-300px) rotateY("+pres.cRotateY+"deg) rotateX("+pres.cRotateX+"deg) rotateZ("+pres.cRotateZ+"deg)"});
412 }
413 };
414
415 pres.loadXML("pres.xml");
416
417 pres.cRotateY = 0;
418 pres.cRotateX = 0;
419 pres.cRotateZ = 0;
420
421 window.onkeydown = pres.keyDown;
422 window.onmousedown = pres.mouseDown;
423 window.onmouseup = pres.mouseUp;
424 window.ontouchstart = pres.mouseDown;
425 window.ontouchend = pres.mouseUp;
426 </script>
427 </body>
428 </html>
Something went wrong with that request. Please try again.