How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

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

I suggest reading the introduction to the article Rotation About an Arbitrary Axis in 3 Dimensions . The basics are:

(1) Translate space so that the rotation axis passes through the origin.
(2) Rotate space about the z axis so that the rotation axis lies in the xz plane.
(3) Rotate space about the y axis so that the rotation axis lies along the z axis.
(4) Perform the desired rotation by θ about the z axis.
(5) Apply the inverse of step (3).
(6) Apply the inverse of step (2).
(7) Apply the inverse of step (1).