# 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".