またもや fujillin さんに、対抗する？

http://oshiete.goo.ne.jp/qa/7608841.html
javascriptの円形画像ギャラリーのサンプル
う〜〜ん、何だかなぁ〜
動くものとか、回転するものに反応する人、二名。
Firefox だと、まだ動かないのかな？
ipad からだと、デバッグに戸惑う。
<!DOCTYPE html>
<title>sample</title>
<style>
#screen {
  -webkit-perspective: 500px;
  -webkit-transform : transform-style('preserve-3d');
}
#screen img {
  position : absolute;
  top : 100;
}
</style>

<body>

<div id="screen">
  <img src="./img/photo0.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f0"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f0"  width="400" height="100">

  <img src="./img/photo0.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f1"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f1"  width="400" height="100">

  <img src="./img/photo0.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo0.jpg" alt="f2"  width="400" height="100">
  <img src="./img/photo1.jpg" alt="f2"  width="400" height="100">
</div>

<script>

(function () {
  var sin = Math.sin;
  var cos = Math.cos;
  var int = Math.floor;
  var deg = Math.PI / 180;
  var tmp;
  var bufSin = [];
  var bufCos = [];
  
  for (var i = 0; i < 360; i++) {
    tmp = i * deg;
    bufSin[i] = sin (tmp);
    bufCos[i] = cos (tmp);
  }
  

  function sinIntDeg (n) {
    return bufSin [n % 360 |0];
  }
  

  function cosIntDeg (n) {
    return bufCos [n % 360 |0];
  }
  
  
  function aryToFixedString (ary) {
    return ary.map (function (a) { return a.toFixed (10); } ).join (',');
  }
  

  function Tile (image, distance, angle, scale, offsetHeight) {
    this.image = image;
    this.distance = distance;
    this.angle = angle;
    this.scale = scale;
    this.offsetHeight = offsetHeight;
    this.position = {};
    this.rotate ();
  }


  function TileRotateY (stepAngle) {
    var a = this.angle += stepAngle || 0;
    var r = this.distance;
    
    this.position = {
      x: sinIntDeg (a) * r,
      y: this.offsetHeight,
      z: cosIntDeg (a) * r
    };
    
    return this;
  }
  
  
  function TileCreate (image, distance, angle, scale, offsetHeight) {
    if (arguments.length < 2)
      throw new Error;
    
    return new Tile (
      image,
      distance || 100,
      angle || 0,
      scale || 1,
      offsetHeight || 0
    );
  }
  

  Tile.prototype.rotate = TileRotateY;
  Tile.create = TileCreate;
  
  //________________________
  
  function FloorMember (member, angle, step) {
    this.member = member;
    this.angle = angle;
    this.step = step;
    this.timerId = null;
  }
  
  
  function FloorMemberRotate () {
    this.angle += this.step;
    
    this.member.forEach (function (tile) {
      var p = tile.rotate (this.step).position;
      var sin = sinIntDeg (tile.angle);
      var cos = cosIntDeg (tile.angle);
      var ary = [
        tile.scale * cos,             0,               -sin,           0,
                       0,    tile.scale,                  0,           0,
                     sin,             0,   tile.scale * cos,           0,
                     p.x,           p.y,                p.z,           1
      ];

      tile.image.style['-webkit-transform'] = 'matrix3d('+ aryToFixedString (ary)+')';
    }, this);
  }
  
  
  function FloorMemberStart () {
    var that = this;
    var func = function () { that.rotate (); };
    if (! this.timerId) {
      this.timerId = setInterval (func, 30);
    }
  }
  
  
  function FloorMemberCreate (images, radius, offsetFloor, step) {
    if (arguments.length < 2)
      throw new Error;
    
    var member = [];
    var imgs = Array.prototype.slice.call (images, 0);
    var len = imgs.length;
    var side = int (radius * 2 * Math.tan (Math.PI / len) + 0.5);
    var img;
    var aspectRatio = parseInt (imgs[0].height, 10) / parseInt (imgs[0].width, 10);
    var height = int (side * aspectRatio + 0.5);
    var offsetHeight = (offsetFloor || 0) * height;
    var n = 360 / len;

    for (var i = 0; i < len; i++) {
      img = imgs[i];
      img.width = String (side);
      img.height = String (height);
      member.push (new Tile (img, radius, n * i, 1, offsetHeight));
    }
    
    return new FloorMember (member, 0, step || 1);
  }
  
  
  FloorMember.prototype.start = FloorMemberStart;
  FloorMember.prototype.rotate = FloorMemberRotate;
  FloorMember.create = FloorMemberCreate;
  
  this.FloorMember = FloorMember;
}) ();


FloorMember.create (document.querySelectorAll ('#screen img[alt="f0"]'), 1000, 0, 1).start ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f1"]'), 1000, 1, 2).start ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f2"]'), 1000, 2, 3).start ();

</script>