Simple Core Animations 3D transform of UIView

Question

I'm trying to make simple partly flip animation with CA, but I had a problems with perspective. I tried with:

    [UIView animateWithDuration:1.0 animations:^{
    self.someView.layer.anchorPoint = CGPointMake(0.5, 0);
    self.someView.layer.transform = CATransform3DMakeRotation(M_PI*0.6,1.0,0.0,0.0);
} completion:^(BOOL finished){
    // code to be executed when flip is completed
}];

How to get this nice perspective?

enter image description here

Duplicate question? - http://stackoverflow.com/questions/347721/how-do-i-apply-a-perspective-transform-to-a-uiview — Justin Meiners, Mar 12 '13 at 23:46

bvogelzang · Accepted Answer · 2013-03-13T19:03:56.977

33

Something like this would do:

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -1000.0;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI * 0.6, 1.0f, 0.0f, 0.0f);
[UIView animateWithDuration:1.0 animations:^{
    self.someView.layer.anchorPoint = CGPointMake(0.5, 0);
    self.someView.layer.transform = rotationAndPerspectiveTransform;
} completion:^(BOOL finished){
    // code to be executed when flip is completed
}];

edited Mar 13 '13 at 19:03

answered Mar 12 '13 at 23:46

bvogelzang

1,405
14
17

It's almost that, but needs to be outside, not inside. Gray line is fixed on image. – dormitkon Mar 12 '13 at 23:59
played a little bit with m34 property, (1.0/-1000) and now it looks nice :) thx – dormitkon Mar 13 '13 at 00:24

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

How do I apply a perspective transform to a UIView?

See answer in question.

Basically you modify m34 of the matrix which controls how much objects shrink into the background.

If you are more curious check out : http://www.songho.ca/opengl/gl_projectionmatrix.html

edited May 23 '17 at 11:52

Community

1
1

answered Mar 12 '13 at 23:46

Justin Meiners

10,754
6
50
92

Simple Core Animations 3D transform of UIView

2 Answers2

Linked