XUI.Extend translate3d

Attempt to extend XUIjs with a translate plugin

by James Doyle

HTML

<script src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<div id="mydiv" onclick="move()"></div>

CSS

#mydiv {
    width: 100px;
    height: 100px;
    background: #333;
    margin: 20px;
}

JavaScript

xui.extend({
    set: function(d) {
        var prefix = Array(null, '-webkit-', '-moz-', '-ms-', '-o-');
        for (var i = 0; i < prefix.length; i++) {
        this.setStyle(prefix[i] + 'transition', prefix[i] + 'transform ' + d + 's ease');
            return this;
    }},
    translate: function(x, y, z, d) {
        this.set(d);
        var prefix = Array(null, '-webkit-', '-moz-', '-ms-', '-o-');
        this.val = 'translate3d(' + x + 'px,' + y + 'px,' + z + ')';
        for (var i = 0; i < prefix.length; i++) {
            this.setStyle(prefix[i] + 'transform', this.val);
        }
        return this;
    },
    scale: function(x, y, z, d) {
        this.set(d);
        var prefix = Array(null, '-webkit-', '-moz-', '-ms-', '-o-');
        this.val = 'scale3d(' + x + ',' + y + ',' + z + ')';
        for (var i = 0; i < prefix.length; i++) {
            this.setStyle(prefix[i] + 'transform', this.val);
        }
        return this;
    }
});

function move() {
    x$('#mydiv').scale(1.2, 1.2, 0, 1);
    //x$('#mydiv').translate(300, 300, 0, 1);
}