How to rotate UIView in 3D?

Question

I have very simple task, but I can't understand CATransform3DRotate. I have 3 UIImageView with equal height and width, and I need set some transformation for left and right items for next result: https://dl.dropboxusercontent.com/u/15196617/result.png

Original screen: https://dl.dropboxusercontent.com/u/15196617/original.png

My sources:

CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1.f / self.prevItemImageView.bounds.size.width;
transform = CATransform3DRotate(transform, (CGFloat) -(M_PI / 3.f), 0, 1.f, 0);
self.prevItemImageView.layer.anchorPoint = CGPointMake(1.f, 0.5f);
self.prevItemImageView.layer.transform = transform;

transform = CATransform3DIdentity;
transform.m34 = -1.f / self.nextItemImageView.bounds.size.width;
transform = CATransform3DRotate(transform, (CGFloat) (M_PI / 3.f), 0, 0.5f, 0);
self.nextItemImageView.layer.anchorPoint = CGPointMake(0.f, 0.5f);
self.nextItemImageView.layer.transform = transform;

It is not work.

Can you elaborate? What isn't working? – David Rönnqvist May 06 '15 at 13:57 — David Rönnqvist, May 06 '15 at 13:57

score 3 · Answer 1 · answered May 06 '15 at 13:58

What you want to do is apply the transform with altered .m34 component to the superlayer of your image views, as a sublayerTransform. That is what gives transforms on the image views the appearance of depth.

This image started life as a square. But it looks rotated in 3D because its superlayer has a sublayerTransform:

enter image description here

How to rotate UIView in 3D?

1 Answers1