Grow your CSS skills. Land your dream job.

Using Less with JavaScript Injection for 3D rotation, possible?

  • # March 13, 2013 at 6:43 am

    Hello, this is my first post in the forum, I’m pretty certain my code doesn’t work, and doesn’t have a chance of working.

    LESS: [http://pastebin.com/24uRRUm8](http://pastebin.com/24uRRUm8 “Pastebin of the LESS”)

    HTML: [http://pastebin.com/HgstHyKx](http://pastebin.com/HgstHyKx “Pastebin of the HTML structure”)

    Basically the idea is that I want to achieve rotation of an object without the need of excessive amounts of javascript. Having looked in to LESS and CSS3 I found the “.matrix3d()” transformer and want to try it out (documentation is incredibly limited on this). The reason I’ve used matrix3d is that if I can get it working in one dimension of rotation I should be able to get it to work in all 3 at once with only one definition.

    Now to why I think it won’t work, I believe, in order to use “.matrix3d()” you have set constants as the parameters, but if I want something to rotate I’d have to put in radian values and this is where the javascript comes in.

    “.sin(@degs){
    @sin: `Math.sin(@{degs}*(Math.PI/180))`; //HERE’S THE INJECTION
    /*converts degrees to radians, then assigns the sin value.*/
    }”

    …but in this next line where I use these new LESS classes…
    ” .matrix3d(.cos(60);, -(.sin(60));, 0, 0,.sin(60);, .cos(60); , 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);”

    I’m putting “class initialisations” if I can mix my vocabulary (less is an odd egg for names) inside the parameters of another class initialisation (as I defined a LESS version of .matrix3d() for cross browser compatibility) You’ll probably find many issue with these and I will be happy to take the criticism if I can gleen something from it.

    Hopefully you’ll find this interesting in concept even if not in practice.

    Merlyn.

    P.S. to Admins (This will be marked Solved when I have an answer that either approves and/or fixes this or disapproves and explains why)

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".