sandbox/event/3dcube.html

	3dcube.html revision 482388c306e346930994afd7e59b3af43c00aac6
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>webkit 3D cube nav</title>
    <link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts-min.css" />
    <script src="/build/yui/yui-debug.js" type="text/javascript"></script>
    <style type="text/css">

    #nav {
      -webkit-perspective-origin: 50% 200px;
      -webkit-perspective: 900;
      -moz-perspective-origin: 50% 200px;
      -moz-perspective: 900;
    }

    #cube {
      position: relative;
      margin: 0 auto;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 0.3s linear;
      -moz-transform-style: preserve-3d;
      -moz-transition: -moz-transform 0.3s linear;
      height: 200px;
      width: 500px;
    }

    .face {
      position: absolute;
      height: 200px;
      width: 460px;
      padding: 20px;
      font-size: 11px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #333;
      background-color: rgba(33, 66, 99, 0.85);
      -webkit-border-radius: 4px;
    }
    #cube .top  {
      visibility: hidden
      -webkit-transform: rotateX(90deg) translateZ(200px);
      -moz-transform: rotateX(90deg) translateZ(200px);
    }
    #cube .one {
      -webkit-transform: translateZ(250px);
      -moz-transform: translateZ(250px);
    }
    #cube .two {
      -webkit-transform: rotateY(90deg) translateZ(250px);
      -moz-transform: rotateY(90deg) translateZ(250px);
    }
    #cube .three {
      -webkit-transform: rotateY(180deg) translateZ(250px);
      -moz-transform: rotateY(180deg) translateZ(250px);
    }
    #cube .four {
      -webkit-transform: rotateY(-90deg) translateZ(250px);
      -moz-transform: rotateY(-90deg) translateZ(250px);
    }
    #cube .bottom {
      visibility: hidden
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px) ;
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px) ;
    }
  </style>
</head>
<body>
  <h1>YUI Example</h1>
  <div class="description">
    webkit 3D cube nav
  </div>
  <div id="nav">
      <div id="cube">
          <div class="face top">
              Top
          </div>
          <div class="face one">
              <img src="http://l1.yimg.com/a/i/ww/news/2010/10/01/nfl.jpg">
              <div class="yui-cap">
                  <h2>Player let $21 million check sit in house</h2>
                  <p>For a couple of weeks, Washington's Albert Haynesworth didn't deposit an enormous check.</p>
              </div>
          </div>
          <div class="face two">
              <img src="http://l.yimg.com/a/i/ww/news/2010/10/01/aybar.jpg">
              <div class="yui-cap">
                  <h2>Hitter's embarrassing moment at the plate</h2>
                  <p>Players and coaches can't stop laughing after the Angels' Erick Aybar gets hit by a pitch.</p>
              </div>

          </div>
          <div class="face three">
              <img src="http://l.yimg.com/a/i/ww/news/2010/09/30/home-discount.jpg">
              <div class="yui-cap yui-cap-c">
                  <h2>How to get a home at a $100,000 discount</h2>
                  <p>Fannie and Freddie are unloading homes that cost much less than comparable properties just blocks away.</p>
              </div>
          </div>
          <div class="face four">
              <img src="http://l.yimg.com/a/i/ww/news/2010/09/30/boss-pd.jpg">
              <div class="yui-cap">
                  <h2>Career advice your boss won't tell you</h2>
                  <p>Playing it safe won't guarantee a smooth ride at work, and may end up hurting you.</p>
              </div>
          </div>
          <div class="face bottom">
              Bottom
          </div>
      </div>
  </div>
  <script type="text/javascript">
    YUI().use('node', 'event-gestures', 'event-key', function(Y) {
        var x = 0, y = 0, cube = Y.one('#cube'), i,
            startX, endX, startY, endY,

            transform = function(newx, newy) {
                x = (newx === 0) ? 0 : newx || x;
                y = (newy === 0) ? 0 : newy || y;
                cube.setStyle('webkitTransform', 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)');
            };

        y += 90; transform(); y += 90; transform(); y += 90; transform(); y += 90; transform();

        cube.set('tabIndex', -1);
        cube.focus();

        cube.on('keydown', function(e) {
            var code = e.keyCode; Y.log('keydown');
            switch(code) {
                case 37: // left
                    return transform(0, y - 90);
                case 38: // up
                    return transform(x + 90, 0);
                case 39: // right
                    return transform(0, y + 90);
                case 40: // down
                    return transform(x - 90, 0);
            };
        });

        cube.on('gesturemovestart', function(e) {
            e.preventDefault(); Y.log('gesturemovestart');
            startX = e.pageX; startY = e.pageY;
        });

        cube.on('gesturemoveend', function(e) {
            e.preventDefault();
            endX = e.pageX; Y.log('gesturemoveend -- startX - ' + startX + ': ' + endX);

            deltaX = startX - endX;
            if (Math.abs(deltaX) > 20) {
                y = (startX < endX) ? y + 90 : y - 90;
            } else {
                y = (startX < (endX+2)) ? y + 90 : y - 90;
            }

            transform();
        });
    });

  </script>

</body>
</html>