OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
3 <html xmlns="http://www.w3.org/1999/xhtml"> | 3 <html xmlns="http://www.w3.org/1999/xhtml"> |
4 <head> | 4 <head> |
5 <title>Million dollar test</title> | 5 <title>Million dollar test</title> |
6 <style type="text/css" media="screen"> | 6 <style type="text/css" media="screen"> |
7 body { | 7 body { |
8 padding: 0px; margin: 0px; font-size: 12px; font-family:"Lucida Grande",
Verdana, Arial, sans-serif; | 8 padding: 0px; margin: 0px; font-size: 12px; font-family:"Lucida Grande",
Verdana, Arial, sans-serif; |
9 background:#303030; | 9 background:#303030; |
10 } | 10 } |
11 .ie {text-align: left; width:1000px;position:relative;visibility:hidden;z-in
dex:1;} | 11 .ie {text-align: left; width:1000px;position:relative;visibility:hidden;z-in
dex:1;} |
12 .grid {height: 1000px; width:1000px; position:relative;z-index:153;xoverflow
:hidden;} | 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;} | 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;} | 14 #lq {width:1000px;position:relative;z-index:0;text-align:left;} |
15 .bz {-webkit-perspective: 1500;-webkit-perspective-origin: 50% 325px;} | 15 .bz {-webkit-perspective: 1500;-webkit-perspective-origin: 50% 325px;} |
16 .fc {-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg)
;opacity: 1.0;} | 16 .fc {-webkit-transform-style: preserve-3d;transform: rotateY(0deg) ;opacity
: 1.0;} |
17 @-webkit-keyframes spin_3d { | 17 @-webkit-keyframes spin_3d { |
18 0% { -webkit-transform: rotateY(0) rotateZ(0); } | 18 0% { transform: rotateY(0) rotateZ(0); } |
19 33% { -webkit-transform: rotateY(-20deg) rotateZ(-20deg); } | 19 33% { transform: rotateY(-20deg) rotateZ(-20deg); } |
20 65% { -webkit-transform: rotateY(20deg) rotateZ(20deg); } | 20 65% { transform: rotateY(20deg) rotateZ(20deg); } |
21 100% { -webkit-transform: rotateY(0deg) rotateZ(0deg); } | 21 100% { transform: rotateY(0deg) rotateZ(0deg); } |
22 } | 22 } |
23 .plane > a {display:block;height:100%;width:100%;} | 23 .plane > a {display:block;height:100%;width:100%;} |
24 .plane { | 24 .plane { |
25 position: absolute; | 25 position: absolute; |
26 opacity:0.5; | 26 opacity:0.5; |
27 background-repeat:no-repeat; | 27 background-repeat:no-repeat; |
28 -webkit-transition: -webkit-transform 0.3s, opacity 0s;-webkit-backface-
visibility: visible;} | 28 -webkit-transition: -webkit-transform 0.3s, opacity 0s;-webkit-backface-
visibility: visible;} |
29 </style> | 29 </style> |
30 | 30 |
31 <script type="text/javascript"> | 31 <script type="text/javascript"> |
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
103 if (width < height) { | 103 if (width < height) { |
104 dw = width; | 104 dw = width; |
105 } else { | 105 } else { |
106 dw = height; | 106 dw = height; |
107 } | 107 } |
108 cubes += addBlock(x1,y1,width,height,dw); | 108 cubes += addBlock(x1,y1,width,height,dw); |
109 } | 109 } |
110 | 110 |
111 function addBlock(x1,y1,xf,qp,dw) | 111 function addBlock(x1,y1,xf,qp,dw) |
112 { | 112 { |
113 return "<div class='a_cube'><div class='plane one' style='background-colo
r: red;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transfo
rm:rotateY(90deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) tran
slateZ("+(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) t
ranslateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px
);position:absolute;'></div><div class='plane three' style='background-color: gr
een;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)+"p
x);position:absolute;'></div><div class='plane four' style='background-color: ye
llow;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform
:rotateY(90deg) rotateX(90deg) rotateZ(-90deg) translateY(-"+(dw/2)+"px) transla
teX(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) tran
slateZ("+(dw)+"px) translateY(0px);position:absolute;'></div></div>"; | 113 return "<div class='a_cube'><div class='plane one' style='background-colo
r: red;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotat
eY(90deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("
+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane two' st
yle='background-color: blue;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x
1+"px;transform:rotateY(90deg) rotateX(180deg) rotateZ(-90deg) translateX(0px) t
ranslateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absol
ute;'></div><div class='plane three' style='background-color: green;height:"+dw+
"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateX(-90deg) translat
eX(0px) translateZ("+(dw/2)+"px) translateY(-"+(dw/2)+"px);position:absolute;'><
/div><div class='plane four' style='background-color: yellow;height:"+dw+"px;wid
th:"+dw+"px;top:"+y1+"px;left:"+x1+"px;transform:rotateY(90deg) rotateX(90deg) r
otateZ(-90deg) translateY(-"+(dw/2)+"px) translateX(0px) translateZ("+(dw/2)+"px
) translateY(0px);position:absolute;'></div><div class='plane five' style='backg
round-color: gray;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;tran
sform:rotateY(0deg) translateX(0px) translateZ("+(dw)+"px) translateY(0px);posit
ion:absolute;'></div></div>"; |
114 } | 114 } |
115 | 115 |
116 document.getElementById("grid").style.webkitAnimation = "spin_3d 36s infinit
e linear"; | 116 document.getElementById("grid").style.webkitAnimation = "spin_3d 36s infinit
e linear"; |
117 }; | 117 }; |
118 | 118 |
119 </script> | 119 </script> |
120 </head> | 120 </head> |
121 <body onload="loadBlocks()"> | 121 <body onload="loadBlocks()"> |
122 <center> | 122 <center> |
123 <div id="lq"> | 123 <div id="lq"> |
124 <div style="top: 252px; left: 203px; width: 196px; height: 196px; positi
on: relative; | 124 <div style="top: 252px; left: 203px; width: 196px; height: 196px; positi
on: relative; |
125 z-index: 0; text-align: left; border: 0px solid #999; padding: 0px;
background: #333; | 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: cen
ter;"> | 126 -moz-border-radius: 0px; -webkit-border-radius: 0px; text-align: cen
ter;"> |
127 $1 a pixel | 127 $1 a pixel |
128 </div> | 128 </div> |
129 </div> | 129 </div> |
130 <div class="ie" id="ie"> | 130 <div class="ie" id="ie"> |
131 <div class="grid" id="grid"> | 131 <div class="grid" id="grid"> |
132 <div class="row" id="row0"></div><div class="row" id="row1"></div><d
iv 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"></d
iv><div class="row" id="row7"></div><div class="row" id="row8"></div><div class=
"row" id="row9"></div> | 132 <div class="row" id="row0"></div><div class="row" id="row1"></div><d
iv 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"></d
iv><div class="row" id="row7"></div><div class="row" id="row8"></div><div class=
"row" id="row9"></div> |
133 </div> | 133 </div> |
134 </div> | 134 </div> |
135 </center> | 135 </center> |
136 </body> | 136 </body> |
137 </html> | 137 </html> |
OLD | NEW |