transform.js

Made css3 transform super easy.

Supported properties(get and set): translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ

Examples

rotateZ

Set rotateZ to 45deg.

transformjs
          
    var element1 = document.querySelector("#test1");
    Transform(element1);
    element1.rotateZ = 45;

rotating animation

animate the the rotateY property.

transformjs
          
    var element2 = document.querySelector("#test2");
    Transform(element2);

    tick(function () {
        element2.rotateY++;
    });

not perspective

using orthogonal projection if second argument is ture.

transformjs
          
    var element3 = document.querySelector("#test3");
    Transform(element3, true);

    tick(function () {
        element3.rotateX++;
    });

origin

rotate around the left top.

transformjs
          
    var element4 = document.querySelector("#test4");
    Transform(element4); 
    element4.originX = -40;
    element4.originY = -40;

    tick(function () {
        element4.rotateZ++;
    });

zoom

zoom using the scaleX and scaleY property.

transformjs
          
    var element5 = document.querySelector("#test5");
    Transform(element5);
       
    var step = 0.02;
    tick(function () {
        element5.scaleX < 0.5 && (step *= -1);
        element5.scaleX > 1.5 && (step *= -1);
        element5.scaleX += step;
        element5.scaleY += step;
    });

translate

moving elment using the translateX, translateY and translateZ properties.

transformjs
          
    var element6 = document.querySelector("#test6");
    Transform(element6);

    var xStep = 3;
    tick(function () {
        element6.translateX < -50 && (xStep *= -1);
        element6.translateX > 50 && (xStep *= -1);
        element6.translateX += xStep;
    });

skew

skew element using the skewX and skewY properties.

transformjs
          
    var element7 = document.querySelector("#test7");
    Transform(element7);

    var skewStep = 1;
    tick(function () {
        element7.skewY > 30 && (skewStep *= -1);
        element7.skewY < -30 && (skewStep *= -1);
        element7.skewY += skewStep;
    });

The above demonstration code is based on transform.js and tick.js

That's all. Have fun.