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

[merlyn_dytani]

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)

[Author]

Posts