How does Z axis rotation transformation work in CSS?

Answer 1

Each One Is A Line:

X-Goes Horizontal (Left To Right)
Y-Goes Vertical (Up And Down)
Z-Goes Through Your Screen (Think of the line starting at your face and going through your device)

Imagine having a piece of bread on a stick and spinning that stick. If it were on the Z axis and you spun it the bread would basically do a cartwheel. On the Y it would spin around. On the X it would do a roll.

Answer 2

OK sorry I explained the way for the rotateX rotateY and rotateZ for the regular rotate I have to check on

Answer 3

I'm not really informed on rotate3d so I went and found this site describing what arguments it takes

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

Answer 4

No problem glad to help.

Answer 5

Thank you very much. The rotate3d takes 4 arguments: 3 are coordinates and last is the angle, so what it does? does it rotate the object at the given angle about the coordinates given???

Answer 6

Yes. For regular rotate it rotates anticlockwise (negative) and clockwise (positive) like the object is fixed at a center and rotates. But I am talking about Rotate3d . It's something different. Like if you made a 3d cube in a parent with perspective value specified, then it would Rotate3d. But I can't figure what's the role of last argument the angle- which it takes because we also give the x,y,z coordinates in Rotate3d function. It might make the point at given coordinates and can rotate it around the point but in which manner as the point is in three dimensions ? it could be from left , top or behind the point.
I don't know about this Rotate3d. I can be wrong. Anyonr could explain?

Answer 7

Yup. But it also takes an optional value which is an angle. So how the angle rotations would be? The point given will be a fixed point and the center of the body should be considered having a line passing through it through out the point. So it should rotate around that point. Like a ball tied with thread rotating around my hand (if am rotating it). I am just guessing.
Am I right??? Or it's something else?

Answer 8

Ok thank you very much. You explained the Z axis rotation very well 😃