Question

I created this page for better understanding the question. As you can see using CSS3 we can rotate an element around the X,Y or Z axis using transform: rotate[XYZ](M deg/rad).

But I’m looking for a function to rotate the element on any given line. For example, rotating the element on x=y line. or even more complex y=2x+3.

If you don’t understand it please hold a paper in hand and flip it from its two far corners (for y=x or y=-x). or look at this picture.

I’m guessing it would be combination of two rotations, but I don’t know how to calculate the rotations.

Update:

I didn’t know there is a rotate3d function for CSS transform. this function accepts four arguments rx, ry, rz and deg. I feel that would be very helpful for this problem.

Other thing is when we change translate[X,Y,Z] it actually changing the origin of rotation. That mean if you want to rotate around Y=10px you should change the translateZ to 10px

Update2:

My Actual goal is creating a tool to apply CSS transform property using a GUI. as you can see in my jsbin file. I want to extend it to whatever transform possible you can do. One of them is rotation. I’m sure it’s possible to rotate an element around other lines than x=0… but I don’t know how can I do the calculation. For example rotation 45deg around Y and 45deg around Z is same as rotating 45 deg around x=y. I need a solution for all lines in the space.

Answer 1

Solution for question I’m asking is css transform function, rotate3d. Using this function we could rotate DOM elements around any line in 3D space.

This function accepts four arguments that three first are x, y and z and last one is rotation. As I understand how this function work you can translate your line linear algebra function into rotate3d like this:

If you have a line function like 1x + 2y + 3z = 0 and want to rotate your element 30 degree then you should apply this css property to element; transform: rotate3d(1, 2, 3, 30deg);.

I’ve created this little app to demonstrate how rotate3d works.