index.html

<!doctype>
<style>
    body {
        background: #222;
    }
    #leaf {
        background: green;
        border-radius: 130px;
        width: 130px;
        height: 130px;
        -webkit-transform: scaleY(0.5);
        box-shadow: 0 10px 20px rgba(255,255,255,0.1), 0 2px 10px rgba(1,1,1,0.5) inset;
        border-top: 3px solid green;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -65px;
        margin-top: -65px;
    }
</style>
<script src='math-animation.js'></script>

<div id='leaf'></div>

math-animation.js

/**
 * @author @jamesflorentino
 * Date: Oct 25, 2012
 */
function main() {
    "use strict";

    /**
     * @type {Number} FPS
     */
    var FPS = 1000/30;

    /**
     * @type {HTMLDivElement}
     */
    var node = document.querySelector('#leaf');

    /**
     * @type {Number} radiusX
     */
    var radiusX = 10;

    /**
     * @type {Number} radiusY
     */
    var radiusY = 2;

    /**
     * @type {Number} time
     */
    var time = 0;

    /**
     * @type {Number}
     */
    var speed = 0.1;

    /**
     * @type {String}
     */
    var transformProp;


    function detect() {
        (node.style[transformProp = 'webkitTransform'] !== undefined) ||
        (node.style[transformProp = 'MozTransform'] !== undefined) ||
        (node.style[transformProp = 'oTransform'] !== undefined)
        ;
    }

    function update() {
        var target = node;
        target.style[transformProp] =
            "translateX(" + (Math.sin(time) * radiusX)  +  "px)" +
            "translateY(" + (Math.cos(time) * radiusY)  +  "px)"
        ;
        time += speed;
    }


    function start() {
        detect(),
        (transformProp
            ? setInterval(update, FPS)
            : console.log('browser doesnt support css3 transforms')
        );
    }

    start();
}

window.addEventListener('load', main);