Rotate X, Y and Z axis all together

2019-06-19 02:24发布

问题:

I first 3D rotate a flat figure in Illustrator or Photoshop, get the exact angles(x, y and z) applied to it in the design tool and then apply the same angles to a UILabel placed on top of the image to synchronize them visually.

I've figured out how to rotate 2 axis at the same time by using CATransform3DConcat but then I'm not sure how to apply the third.

float angleX = -18 * M_PI / 180;
CATransform3D t1 = CATransform3DMakeRotation(angleX, 1, 0, 0);
float angleY = -26 * M_PI / 180;
CATransform3D t2 = CATransform3DMakeRotation(angleY, 0, 1, 0);
CATransform3D combo1 = CATransform3DConcat(t1, t2);
self.labelPlay.layer.transform = combo1;

EDIT

Trying this now but still no good. Tried all combinations of different orders but nothing.

float angleX = -18 * M_PI / 180;
CATransform3D t1 = CATransform3DMakeRotation(angleX, 1, 0, 0);
float angleY = -26 * M_PI / 180;
CATransform3D t2 = CATransform3DMakeRotation(angleY, 0, 1, 0);
float angleZ = 8 * M_PI / 180;
CATransform3D t3 = CATransform3DMakeRotation(angleZ, 0, 0, 1);

self.label.layer.transform = CATransform3DConcat(CATransform3DConcat(t3, t2), t1);

回答1:

I'm not entirely sure but I think this might be it.

For designers thinking angles from 3D rotation in Illustrator/Photoshop would just work with CATransform3D, it's almost true but you might have to change one tiny thing.

Let's say you have x : -18, y : -26 and z : 8 in your design tool. Switching y and z to positive/negative solved my problem. So now I have -

float angleX = -18 * M_PI / 180;
CATransform3D t1 = CATransform3DMakeRotation(angleX, 1, 0, 0);
float angleY = 26 * M_PI / 180;
CATransform3D t2 = CATransform3DMakeRotation(angleY, 0, 1, 0);
float angleZ = -8 * M_PI / 180;
CATransform3D t3 = CATransform3DMakeRotation(angleZ, 0, 0, 1);

self.label.layer.transform = CATransform3DConcat(CATransform3DConcat(t1, t2), t3);

I can't tell you why exactly but this rotates properly.