A couple of months ago I posted on how to create a distort transform in iOS using a CGAffineTransform. Since then I have been doing a lot of experimenting with transforms trying to create different effects. Something I wanted to do was create a book like effect where the page opened up and looked as if it was coming towards you. This was impossible with a regular CGAffineTransform (3×3 matrix), so I needed to upgrade to a CATransform3D (4×4 matrix) to create the illusion of perspective.
#define CATransform3DPerspective(t, x, y) (CATransform3DConcat(t, CATransform3DMake(1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, 0, 0, 0, 0, 1))) #define CATransform3DMakePerspective(x, y) (CATransform3DPerspective(CATransform3DIdentity, x, y)) CG_INLINE CATransform3D CATransform3DMake(CGFloat m11, CGFloat m12, CGFloat m13, CGFloat m14, CGFloat m21, CGFloat m22, CGFloat m23, CGFloat m24, CGFloat m31, CGFloat m32, CGFloat m33, CGFloat m34, CGFloat m41, CGFloat m42, CGFloat m43, CGFloat m44) { CATransform3D t; t.m11 = m11; t.m12 = m12; t.m13 = m13; t.m14 = m14; t.m21 = m21; t.m22 = m22; t.m23 = m23; t.m24 = m24; t.m31 = m31; t.m32 = m32; t.m33 = m33; t.m34 = m34; t.m41 = m41; t.m42 = m42; t.m43 = m43; t.m44 = m44; return t; }
As with the distort transform, the x and y values adjust intensity. I have included a CATransform3DMake method as there are no built in CATransform3D methods to create a transform by passing in 16 values (mimicking the CGAffineTransformMake method).
For those that have never seen the CATransform3D struct before, you must apply the transform to a CALayer‘s transform, as opposed to a CGAffineTransform which is applied to the UIView‘s transform. If you want to apply it to a UIView, obtain it’s layer then set the transform (myView.layer = CATransform3DMakePerspective(0.002, 0)).
Example of use
And with some work:
Hi Tom,
Interesting stuff.
I also have been playing around with transformations and kind of educated myself from info like you publish on the web, as I find the Apple documentation rather meager. To help others, I made an App (PerspectiveTest) that explains the basics in a simple way (I hope).:
http://itunes.apple.com/nl/app/perspectivetest/id481006743?mt=8
If you have any suggestions on how to bring this to the attention of others who may benefit from it, please let me know or forward the link to them.
Regards,
Voppe
That’s pretty cool, looks like it would be able to help a lot creating a transform to suit your needs, rather than trial and error in code
Hi,
What do represent the two parameters in CATransform3DMakePerspective(0.002, 0) ?
Regards,
Bastien
The first is how much you want it to skew on the X axis (horizontally), and the second for the Y axis (vertically)
Yes, but what are the units ? (radians … ?)
The value goes directly into the transform, if you want to make it radians, or any other type of unit you will need to put some math in there