Cube

To make a cube show up at the bottom right hand corner of the screen you need to use 2 types of tags.

<div></div>

and

<cube></cube>

To start with you need to make the cube tags

<cube></cube>

Than you will need to make three div sections with the f1,f2,and f3 classes

<cube><div class="f1"></div><div class="f2"></div><div class="f3"></div></cube>

That is all you need to do, in HTML that will take up to 25 lines of code EZML condensed it to just 1. The cube can only be displayed in the corner in order to simplify the user experience.

for more advanced developers you CAN get the cube to move and what not if you add the following code to the file within the body tags

<style>
    #experiment {
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;

      -moz-perspective: 800;
      -moz-perspective-origin: 50% 200px;
    }

    cube {
      position: absolute;
      margin: 100px auto 0;
      height: 400px;
      width: 400px;
      -webkit-transition: -webkit-transform 2s linear;
      -webkit-transform-style: preserve-3d;

      -moz-transition: -moz-transform 2s linear;
      -moz-transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      height: 100px;
      width: 100px;
      padding: 20px;
      background-color: rgba(50, 50, 50, 0.7);
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
    }

    #cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(200px);
      -moz-transform: rotateX(90deg) translateZ(200px);
    }

    #cube .two {
      -webkit-transform: translateZ(200px);
      -moz-transform: translateZ(200px);
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(200px);
      -moz-transform: rotateY(90deg) translateZ(200px);
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(200px);
      -moz-transform: rotateY(180deg) translateZ(200px);
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(200px);
      -moz-transform: rotateY(-90deg) translateZ(200px);
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
    }
</style>

<div id="experiment">
    <cube>
        <div class="face one">

        </div>
        <div class="face two">
<!-- YOU MUST REPLACE THE CURRENT CUBE WITH THIS CODE -->
        </div>
        <div class="face three">

        </div>
        <div class="face four">

        </div>

        <div class="face five">

        </div>
        <div class="face six">

        </div>
    </cube>
</div>
    <script>


        var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
            prop,
            el = document.createElement('div');

        for (var i = 0, l = props.length; i < l; i++) {
            if (typeof el.style[props[i]] !== "undefined") {
                prop = props[i];
                break;
            }
        }

        var xAngle = 0, yAngle = 0;
        $('body').keydown(function (evt) {
            switch (evt.keyCode) {
                case 39: // left
                    yAngle -= 90;
                    break;

                case 40: // up
                    xAngle += 90;
                    break;

                case 37: // right
                    yAngle += 90;
                    break;

                case 38: // down
                    xAngle -= 90;
                    break;
            };
            document.getElementById('cube').style[prop] = "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
        });</script>

That code allows the cube to be rotated with the arrow keys, NOTE: that code has not been tested with EZML I just made it for the wiki, it may need tweaking, it is not recommended to do that unless you know what you are doing.