|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
3 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
4 <head> |
|
5 <title>Million dollar test</title> |
|
6 <style type="text/css" media="screen"> |
|
7 body { |
|
8 padding: 0px; margin: 0px; font-size: 12px; font-family:"Lucida Grande", Verdana, Arial, sans-serif; |
|
9 background:#303030; |
|
10 } |
|
11 .ie {text-align: left; width:1000px;position:relative;visibility:hidden;z-index:1;} |
|
12 .grid {height: 1000px; width:1000px; position:relative;z-index:153;xoverflow:hidden;} |
|
13 .row {background:url(100grid_inv.png) #000;height: 100px; text-align: left; position:relative;width:1000px;z-index:10;} |
|
14 #lq {width:1000px;position:relative;z-index:0;text-align:left;} |
|
15 .bz {-webkit-perspective: 1500;-webkit-perspective-origin: 50% 325px;} |
|
16 .fc {-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg) ;opacity: 1.0;} |
|
17 @-webkit-keyframes spin_3d { |
|
18 0% { -webkit-transform: rotateY(0) rotateZ(0); } |
|
19 33% { -webkit-transform: rotateY(-20deg) rotateZ(-20deg); } |
|
20 65% { -webkit-transform: rotateY(20deg) rotateZ(20deg); } |
|
21 100% { -webkit-transform: rotateY(0deg) rotateZ(0deg); } |
|
22 } |
|
23 .plane > a {display:block;height:100%;width:100%;} |
|
24 .plane { |
|
25 position: absolute; |
|
26 opacity:0.5; |
|
27 background-repeat:no-repeat; |
|
28 -webkit-transition: -webkit-transform 0.3s, opacity 0s;-webkit-backface-visibility: visible;} |
|
29 </style> |
|
30 |
|
31 <script type="text/javascript"> |
|
32 function loadBlocks() { |
|
33 document.getElementById("ie").style.visibility = "visible"; |
|
34 document.getElementById("ie").className = document.getElementById("ie").className + " bz"; |
|
35 document.getElementById("grid").className = document.getElementById("grid").className + " fc"; |
|
36 document.getElementById("lq").style.display = "none"; |
|
37 |
|
38 var cubes; |
|
39 |
|
40 cubify(200,0,250,50); |
|
41 cubify(800,500,900,600); |
|
42 cubify(250,350,300,400); |
|
43 cubify(600,600,650,650); |
|
44 cubify(850,0,900,50); |
|
45 cubify(650,450,700,500); |
|
46 cubify(100,500,250,650); |
|
47 cubify(400,600,500,700); |
|
48 cubify(700,600,800,700); |
|
49 cubify(350,0,500,150); |
|
50 cubify(450,200,500,250); |
|
51 cubify(550,250,600,300); |
|
52 cubify(0,400,100,450); |
|
53 cubify(600,150,650,200); |
|
54 cubify(600,700,650,750); |
|
55 cubify(150,850,450,950); |
|
56 cubify(200,100,300,200); |
|
57 cubify(750,200,950,400); |
|
58 cubify(250,700,350,800); |
|
59 cubify(600,800,700,900); |
|
60 cubify(100,300,150,350); |
|
61 cubify(0,300,50,350); |
|
62 cubify(850,650,950,700); |
|
63 cubify(900,100,950,150); |
|
64 cubify(200,400,250,450); |
|
65 cubify(200,250,250,300); |
|
66 cubify(300,600,350,650); |
|
67 cubify(50,200,100,250); |
|
68 cubify(100,100,150,150); |
|
69 cubify(0,0,5,5); |
|
70 cubify(470,430,475,435); |
|
71 cubify(520,480,525,485); |
|
72 cubify(570,380,575,385); |
|
73 cubify(550,0,600,50); |
|
74 cubify(650,0,700,50); |
|
75 cubify(425,390,455,400); |
|
76 cubify(435,400,445,430); |
|
77 cubify(525,425,530,430); |
|
78 cubify(450,500,465,515); |
|
79 cubify(650,100,750,200); |
|
80 cubify(0,0,50,50); |
|
81 cubify(700,750,900,800); |
|
82 cubify(495,390,510,405); |
|
83 cubify(495,445,500,450); |
|
84 cubify(560,450,565,455); |
|
85 cubify(460,460,465,465); |
|
86 cubify(525,370,530,375); |
|
87 cubify(490,420,495,425); |
|
88 cubify(520,440,525,445); |
|
89 cubify(510,420,515,425); |
|
90 cubify(495,465,500,470); |
|
91 cubify(475,405,480,410); |
|
92 cubify(545,400,550,405); |
|
93 cubify(485,370,490,375); |
|
94 cubify(430,365,435,370); |
|
95 |
|
96 document.getElementById("grid").innerHTML = cubes + document.getElementById("grid").innerHTML; |
|
97 |
|
98 function cubify(x1, y1, x2, y2) |
|
99 { |
|
100 var width, height,dw; |
|
101 width = x2 - x1; |
|
102 height = y2 - y1; |
|
103 if (width < height) { |
|
104 dw = width; |
|
105 } else { |
|
106 dw = height; |
|
107 } |
|
108 cubes += addBlock(x1,y1,width,height,dw); |
|
109 } |
|
110 |
|
111 function addBlock(x1,y1,xf,qp,dw) |
|
112 { |
|
113 return "<div class='a_cube'><div class='plane one' style='background-color: red;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(90deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane two' style='background-color: blue;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(90deg) rotateX(180deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane three' style='background-color: green;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateX(-90deg) translateX(0px) translateZ("+(dw/2)+"px) translateY(-"+(dw/2)+"px);position:absolute;'></div><div class='plane four' style='background-color: yellow;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(90deg) rotateX(90deg) rotateZ(-90deg) translateY(-"+(dw/2)+"px) translateX(0px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane five' style='background-color: gray;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(0deg) translateX(0px) translateZ("+(dw)+"px) translateY(0px);position:absolute;'></div></div>"; |
|
114 } |
|
115 |
|
116 document.getElementById("grid").style.webkitAnimation = "spin_3d 36s infinite linear"; |
|
117 }; |
|
118 |
|
119 </script> |
|
120 </head> |
|
121 <body onload="loadBlocks()"> |
|
122 <center> |
|
123 <div id="lq"> |
|
124 <div style="top: 252px; left: 203px; width: 196px; height: 196px; position: relative; |
|
125 z-index: 0; text-align: left; border: 0px solid #999; padding: 0px; background: #333; |
|
126 -moz-border-radius: 0px; -webkit-border-radius: 0px; text-align: center;"> |
|
127 $1 a pixel |
|
128 </div> |
|
129 </div> |
|
130 <div class="ie" id="ie"> |
|
131 <div class="grid" id="grid"> |
|
132 <div class="row" id="row0"></div><div class="row" id="row1"></div><div class="row" id="row2"></div><div class="row" id="row3"></div><div class="row" id="row4"></div><div class="row" id="row5"></div><div class="row" id="row6"></div><div class="row" id="row7"></div><div class="row" id="row8"></div><div class="row" id="row9"></div> |
|
133 </div> |
|
134 </div> |
|
135 </center> |
|
136 </body> |
|
137 </html> |