まわせ！まわせ～！むずかしいざひょうけいはむししてるけど・・・
すべてのぜんかくくうはくは、はんかくにしてちょ！
<!DOCTYPE html>
<title></title>
<style type="text/css">
#box {
width : 800px;
height : 800px;
background-color: black;
list-style :none;
margin: 0;
padding: 0;
}
#box li {
color : #fff;
}
</style>
<body>
<ul id="box">
<li>1
<li>2
<li>3
<li>4
<li>5
<li>6
<li>7
<li>8
<li>9
</ul>
<script>
(function ( ) {
var node = document.getElementById ('box');
var lis = node.getElementsByTagName ('li');
var cnt, li;
var parts = [ ];
var cx = node.offsetWidth / 2;
var cy = node.offsetHeight / 2;
var r = 300;
var n = 360 / lis.length;
var xr = 3;
var yr = 1;
var zr = .5;
var deg = Math.PI / 180;
var depth = 1000;
var scale = 700;
node.style.position = 'relative';
node.style.overflow = 'hidden';
// ざひょうのていぎ
for (cnt = 0; li = lis[cnt]; cnt++) {
li.style.position = 'absolute';
parts.push ( {
'element' : li,
'x' : Math.sin (n * cnt * deg) * r,
'y' : 0,
'z' : Math.cos (n * cnt * deg) * r,
'alpha' : 1,
'scale' : 1
});
}
(function ( ) {
var x, y, z, mx, my, mz, p, t, xx, yy, zz, s, ss;
for (cnt = 0; p = parts[cnt++]; ) {
x = p.x, y = p.y, z = p.z, s = p.element.style;
if (xr) { //ｘ軸の回転
t = xr * deg;
my = y * Math.cos (t) - z * Math.sin (t);
mz = y * Math.sin (t) + z * Math.cos (t);
y = my, z = mz;
}
if (yr) {
t = yr * deg;
mx = x * Math.cos (t) - z * Math.sin (t);
mz = x * Math.sin (t) + z * Math.cos (t);
x = mx, z = mz;
}
if (zr) {
t = zr * deg;
mx = x * Math.cos (t) - y * Math.sin (t);
my = x * Math.sin (t) + y * Math.cos (t);
x = mx, y = my;
}
zz = (z + depth) / scale;
xx = (cx + x / zz) |0;
yy = (cy + y / zz) |0;
s.top = yy + 'px';
s.left = xx + 'px';
s.fontSize = scale - (zz * 300 |0) + '%';
p.x = x, p.y = y, p.z = z;
}
setTimeout (arguments.callee, 30);
})();
})();
</script>
