example-3.html

<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
  <head>

    <title>TooIt :: Web Consulting &amp; Development</title>

    <meta name="description" content="Web consulting and development">
    <meta name="keywords" content="web consulting, consulting services, software development, drupal, wordpress, animation, html5">
    <meta name="author" content="TooIt">
    <meta charset="UTF-8">

    <!--[Google Web Fonts]-->
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/jquery.cube.css" type="text/css">

    <!-- Scripts -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="js/greensock/minified/TimelineMax.min.js"></script>
    <script type="text/javascript" src="js/greensock/minified/TweenMax.min.js"></script>
    <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script>
    <!--script type="text/javascript" src="js/greensock/minified/utils/Draggable.min.js"></script-->
    <script type="text/javascript" src="js/Draggable.custom.js"></script>

    <script type="text/javascript" src="js/GreenProp.min.js"></script>

    <script type="text/javascript" src="js/jquery.cube.js"></script>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!--[if lte IE 7]>
    <script src="js/IE8.js" type="text/javascript"></script><![endif]-->
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->

    <style>

    #my-cube {
      width: 500px;
      height: 300px;
      float: left;
      margin: 50px;
      border: 1px solid #ccc;
      position: relative;
    }

    div.links {
      clear: both;
      margin: 10px 0;
    }

    div.sliders {
      width: 400px;
      float: right;
    }

    div.slider {
      margin: 10px 0;
      clear: both;
    }

    </style>

    <script type="text/javascript">
      $(document).ready(function() {

        $("#my-cube").cube();

        var slider,
            cube = $("#my-cube").data('cube');

        // Create Sliders for X, Y and Z.
        $('#slider-x, #slider-y, #slider-z').slider({
          orientation: "horizontal",
          range: "min",
          max: 720,
          min: -720,
          value: 0,
          start: function (a) {
            $("#my-cube").data('cube').cubeScaleOut();
            $("#my-cube").data('cube').options.currentSide = -1;
          },
          stop: function () {
            $("#my-cube").data('cube').cubeScaleIn();
          },
          slide: function (event, ui) {
            event.stopPropagation();
            var axis = $(this).attr('id').replace('slider-','');
            rotateCubeWithSlider(axis, ui.value);
          }
        });

        // Create Sliders for Zoom Out and In.
        $('#slider-s').slider({
          orientation: "horizontal",
          range: "min",
          max: 200,
          min: 0,
          value: 100,
          start: function () {
            cube.cubeAlphaOut();
            cube.options.currentSide = -1;
          },
          stop: function () {
            cube.cubeAlphaIn();
          },
          slide: function (event, ui) {
            event.stopPropagation();
            cube.cubeScale(ui.value / 100);
          }
        });

        function rotateCubeWithSlider (axis, value) {

          var space = cube.space;

          switch (axis) {
          case 'x':
            space.rotationX = value;
            break;
          case 'y':
            space.rotationY = value;
            break;
          case 'z':
            space.rotationZ = value;
            break;
          }

          cube.cubeRotate(false);

        };




      });
    </script>

  </head>
  <body>

    <div id="my-cube">
      <div>
        <p>1 lorem ipsum.</p>
      </div>
      <div>
        <p>2 lorem ipsum.</p>
      </div>
      <div>
        <p>3 lorem ipsum.</p>
      </div>
      <div>
        <p>4 lorem ipsum.</p>
      </div>
      <div>
        <p>5 lorem ipsum.</p>
      </div>
      <div>
        <p>6 lorem ipsum.</p>
      </div>
    </div>

    <div class="sliders">
      <div class="slider">
        <h3>Rotate X axis</h3>
        <div id="slider-x"></div>
      </div>
      <div class="slider">
        <h3>Rotate Y axis</h3>
        <div id="slider-y"></div>
      </div>
      <div class="slider">
        <h3>Rotate Z axis</h3>
        <div id="slider-z"></div>
      </div>
      <div class="slider">
        <h3>Zoom Out and In</h3>
        <div id="slider-s"></div>
      </div>
    </div>

    <fieldset>
      <legend>Cube 1 links</legend>
      <a href="cube2.html#side-1" class="cube-anchor" rel="my-cube">Side 1</a>
      <a href="cube2.html#side-2" class="cube-anchor" rel="my-cube">Side 2</a>
      <a href="cube2.html#side-3" class="cube-anchor" rel="my-cube">Side 3</a>
      <a href="cube2.html#side-4" class="cube-anchor" rel="my-cube">Side 4</a>
      <a href="cube2.html#side-5" class="cube-anchor" rel="my-cube">Side 5</a>
      <a href="cube2.html#side-6" class="cube-anchor" rel="my-cube">Side 6</a>
    </fieldset>

  </body>
</html>