Using Less with JavaScript Injection for 3D rotation, possib

/*
    Document   : matrix3d
    Created on : 19-Dec-2012, 16:43:49
    Author     : Merlyn Cooper <merlyn.cooper@hotmail.co.uk>
    Description:
        The intention is to use as minimal javascript (and code in general)
        as possible to achieve 3D rotation of a HTML object using LESS.
*/

section {
    background: #aaf;
    height: 150px;
    margin: 20px 0px;
    border: 2px dashed #555;
}

div {
    background: #ffa;
    width: 100px;
    height: 100px;
    margin: 10px 10px;
    padding: 10px;
    border: 2px dashed #555;
}

root {
    display: block;
}

.cos(@degs)
{
    @cos: `Math.cos(@{degs}*(Math.PI/180))`;
    /*converts degrees to radians, then assignss the cos value.*/
}

.sin(@degs){
    @sin: `Math.sin(@{degs}*(Math.PI/180))`;
    /*converts degrees to radians, then assigns the sin value.*/
}

.matrix{
    /*
    .matrix3d(scX,skX, Xp, pX, (1,0,0,0,
              skY,scY, Yp, pY,  0,1,0,0,
              scZ,skZ, Zp, pZ,  0,0,1,0,
              tX, tY, tZ, tp);  0,0,0,1)
    */
    .matrix3d(
                .cos(60);, -(.sin(60));, 0, 0,
                .sin(60);, .cos(60); , 0, 0,
                0       , 0        , 1, 0,
                0       , 0        , 0, 1);
}

/*0.5000000000000001, -0.8660254037844386, 0, 0,
*0.8660254037844386, 0.5000000000000001 , 0, 0,
*/
/*
 *
 * ■ perspective :changes the Screen perspective.
 * perspective ■ :changes the axis perspective.
 * translateP    :translates the perspective point.
 *
 */
.matrix3d(@scaleX, @skewX, @Xperspective, @perspectiveX,@skewY, @scaleY, @Yperspective, @perspectiveY, @scaleZ, @skewZ, @Zperspective, @perspectiveZ,@translateX,@translateY,@translateZ,@translateP)
{
    transform: matrix3d(@scaleX, @skewX, @Xperspective, @perspectiveX,@skewY, @scaleY, @Yperspective, @perspectiveY, @scaleZ, @skewZ, @Zperspective, @perspectiveZ,@translateX,@translateY,@translateZ,@translateP);
    -webkit-transform: matrix3d(@scaleX, @skewX, @Xperspective, @perspectiveX,@skewY, @scaleY, @Yperspective, @perspectiveY, @scaleZ, @skewZ, @Zperspective, @perspectiveZ,@translateX,@translateY,@translateZ,@translateP); /* safari and chrome */
    -moz-transform: matrix3d(@scaleX, @skewX, @Xperspective, @perspectiveX,@skewY, @scaleY, @Yperspective, @perspectiveY, @scaleZ, @skewZ, @Zperspective, @perspectiveZ,@translateX,@translateY,@translateZ,@translateP); /* firefox */
    -o-transform: matrix3d(@scaleX, @skewX, @Xperspective, @perspectiveX,@skewY, @scaleY, @Yperspective, @perspectiveY, @scaleZ, @skewZ, @Zperspective, @perspectiveZ,@translateX,@translateY,@translateZ,@translateP); /* opera */
    -ms-transform: matrix3d(@scaleX, @skewX, @Xperspective, @perspectiveX,@skewY, @scaleY, @Yperspective, @perspectiveY, @scaleZ, @skewZ, @Zperspective, @perspectiveZ,@translateX,@translateY,@translateZ,@translateP); /* ie9 */
}