#### [SOLVED] How do I apply a perspective transform to a UIView?

I'm looking to perform a perspective transform on a UIView (such as seen in coverflow)

Does anyonew know if this is possible?

I've investigated using `CALayer` and have run through all the pragmatic programmer Core Animation podcasts, but I'm still no clearer on how to create this kind of transform on an iPhone.

Any help, pointers or example code snippets would be really appreciated!

As Ben said, you'll need to work with the `UIView's` layer, using a `CATransform3D` to perform the `layer's` `rotation`. The trick to get perspective working, as described here, is to directly access one of the matrix `cells` of the `CATransform3D` (m34). Matrix math has never been my thing, so I can't explain exactly why this works, but it does. You'll need to set this value to a negative fraction for your initial transform, then apply your layer rotation transforms to that. You should also be able to do the following:

Objective-C

``````UIView *myView = [[self subviews] objectAtIndex:0];
CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
``````

Swift 5.0

``````if let myView = self.subviews.first {
let layer = myView.layer
var rotationAndPerspectiveTransform = CATransform3DIdentity
rotationAndPerspectiveTransform.m34 = 1.0 / -500
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0 * .pi / 180.0, 0.0, 1.0, 0.0)
layer.transform = rotationAndPerspectiveTransform
}
``````

which rebuilds the layer transform from scratch for each rotation.

A full example of this (with code) can be found here, where I've implemented touch-based rotation and scaling on a couple of `CALayers`, based on an example by Bill Dudney. The newest version of the program, at the very bottom of the page, implements this kind of perspective operation. The code should be reasonably simple to read.

The `sublayerTransform` you refer to in your response is a transform that is applied to the sublayers of your `UIView's` `CALayer`. If you don't have any sublayers, don't worry about it. I use the sublayerTransform in my example simply because there are two `CALayers` contained within the one layer that I'm rotating.

#### @Nick Cartwright 2008-12-30 10:44:21

Thanks Brad - you're a star. PS: Sorry for the late ticking of your excellent answer! Nick.

This works nicely for me, except I seem to lose half my image (along a vertical division)--sometimes LHS, sometimes RHS.

@iPadDeveloper2011 - Odds are, you're trying to rotate a view or layer when there is another opaque view or layer on the same plane. The half of your view or layer that projects away from the screen would then be below this other view, and thus be hidden. You can either reorder your view hierarchy to prevent this or use the zPosition property to move your foreground view high enough above the one that's cutting it off.

@Brad Larson - Thanks for your reply. I've posted a separate SO question here about this (no answer yet). I thought similarly to you, but it seems like it is the half that is coming "out" of the screen that is cut off. Also, the resulting image is "in front" of everything. I guess the problem may be that I'm just using addsubview to layer my views, and I should use zPosition, as you suggest.

@Brad Larson - "projects away from the screen" ("projects" which way?) and "below" in your comment are a bit ambiguous. I think you mean going "into" the screen and "behind" (aren't things that are "below" in the "downward branching" hierarchy "in front" on the screen!?)

@Brad Larson - Thank you. Setting zPosition for all my layers was the solution.

One note: zPosition refers to the real number of pixels up or down the z-axis. This is in contrast to, for instance, the CSS property, z-index, which simply draws the highest z-index on top, then the next, etc... Here, since we're in true 3d space, the zPosition positions the plane of your view in space. So, in the example, if you rotate a 320 pixel-wide view 45 degrees, the left edge will stick 'up' through the other views by roughly 113 pixels (sin(45deg) * 160). So you'd need to set any other view zPositions to 114 or higher to keep the rotated view from sticking up through. (Math check?)

#### @Dimitris 2011-06-14 21:50:14

Though this works fine visually, when applied to a MKMapView it breaks it. Though the view and the interaction seem to work, when zooming in after a certain level (continent level) the maps do not update anymore, they revert back to the most-zoomed-out version. Really weird bug - if you can think of a workaround i'd be interested.

#### @fluffy 2011-07-29 23:46:36

FYI, the reason the m34 cell affects the perspective transform is that's the cell in the matrix that affects how the world-space Z value maps to the clip-space W value (which is used for perspective projection). Read up on homogenous transformation matrices for more information.

#### @uerceg 2013-01-16 09:13:07

Any advice how to achieve this: When my view is in perspective, it appears that height is shrinking when looking my view from closer side to side which "goes in background". In my case when I apply this, this shrinking happens, but not so "fast". Is there any parameter which I can change in order to achieve this shrinking to happen "faster"?

@uerceg - You're going to want to ask that as a separate question, preferably with images that illustrate what's happening and what you want to happen.

#### @Fattie 2016-05-21 17:18:02

@BradLarson. Say, I've been wondering how to affect the matrix, so as to move the axis of rotation. Changing the origin is not ideal. stackoverflow.com/questions/37364831 Perhaps you have a clue about this, cheers

#### @Fattie 2016-05-21 17:19:41

@uerceg If you still need to know how to do this. The parameter "1.0 / -500" is indeed exactly "how long a lens you are using". Try a value of 1/2 - you are extremely close to the swinging object. Try a value of 1/0000: you are so far away there is almost no perspective change. It's the frustrum length. basically.

#### @HuaTham 2017-03-10 01:24:00

To add to Brad's answer and to provide a concrete example, I borrow from my own answer in another post on a similar topic. In my answer, I created a simple Swift playground that you can download and play with, where I demonstrate how to create perspective effects of a UIView with a simple hierarchy of layers, and I show different results between using `transform` and `sublayerTransform`. Check it out.

Here are some of the images from the post:

Code should be posted as text. It's really difficult to read code in an image. Plus the code in a picture can't be referenced, copied, or searched.

#### @HuaTham 2018-08-23 05:04:14

Links go bad over time. It's always best to paste the important code as text directly into the answer.

#### @Volodymyr Kulyk 2019-05-15 08:18:20

unable to run this playground in Xcode 10.2

#### @Tech 2017-12-21 11:43:29

You can get accurate Carousel effect using iCarousel SDK.

You can get an instant Cover Flow effect on iOS by using the marvelous and free iCarousel library. You can download it from https://github.com/nicklockwood/iCarousel and drop it into your Xcode project fairly easily by adding a bridging header (it's written in Objective-C).

If you haven't added Objective-C code to a Swift project before, follow these steps:

• Go into the folder you unzipped, open its iCarousel subfolder, then select iCarousel.h and iCarousel.m and drag them into your project navigation â€“ that's the left pane in Xcode. Just below Info.plist is fine.
• Check "Copy items if needed" then click Finish.
• Xcode will prompt you with the message "Would you like to configure an Objective-C bridging header?" Click "Create Bridging Header" You should see a new file in your project, named YourProjectName-Bridging-Header.h.
• Add this line to the file: #import "iCarousel.h"
• Once you've added iCarousel to your project you can start using it.
• Make sure you conform to both the iCarouselDelegate and iCarouselDataSource protocols.

Swift 3 Sample Code:

``````    override func viewDidLoad() {
let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
carousel.dataSource = self
carousel.type = .coverFlow
}

func numberOfItems(in carousel: iCarousel) -> Int {
return 10
}

func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
let imageView: UIImageView

if view != nil {
imageView = view as! UIImageView
} else {
imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 128, height: 128))
}

imageView.image = UIImage(named: "example")

return imageView
}
``````

#### @Ben Gottlieb 2008-12-07 17:43:09

You can only use Core GraphicsÂ (Quartz, 2D only) transforms directly applied to a UIView's transform property. To get the effects in coverflow, you'll have to use CATransform3D, which are applied in 3-D space, and so can give you the perspective view you want. You can only apply CATransform3Ds to layers, not views, so you're going to have to switch to layers for this.

Check out the "CovertFlow" sample that comes with Xcode. It's mac-only (ie not for iPhone), but a lot of the concepts transfer well.

#### @Alex 2008-12-07 17:49:37

I'm looking for this coverflow sample in /Developer/Examples, without success, where can you find it?

#### @Ben Gottlieb 2008-12-07 19:29:49

It's actually "CovertFlow", and it's in /Developer/Examples/Quartz/Core Animation/"