By Nick Cartwright


2008-12-07 16:04:39 8 Comments

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!

4 comments

@Brad Larson 2008-12-09 17:44:06

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.

@iPadDeveloper2011 2011-02-19 05:29:23

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

@Brad Larson 2011-02-20 17:03:27

@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.

@iPadDeveloper2011 2011-02-20 23:07:59

@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.

@iPadDeveloper2011 2011-02-20 23:13:38

@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!?)

@iPadDeveloper2011 2011-02-21 00:16:48

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

@Chris Ladd 2011-03-18 21:00:30

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"?

@Brad Larson 2013-01-16 22:41:09

@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:

.sublayerTransform option

.transform option

@rmaddy 2018-08-23 04:55:07

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

@rmaddy, I have code available in the Bitbucket link in my answer.

@rmaddy 2018-08-23 05:23:42

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:

  • Download iCarousel and unzip it
  • 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() {
      super.viewDidLoad()
      let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
      carousel.dataSource = self
      carousel.type = .coverFlow
      view.addSubview(carousel) 
    }

   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/"

Related Questions

Sponsored Content

21 Answered Questions

[SOLVED] Giving UIView rounded corners

25 Answered Questions

[SOLVED] How do I sort an NSMutableArray with custom objects in it?

42 Answered Questions

[SOLVED] How to check for an active Internet connection on iOS or macOS?

38 Answered Questions

[SOLVED] How can I disable the UITableView selection?

12 Answered Questions

[SOLVED] iPhone "slide to unlock" animation

1 Answered Questions

[SOLVED] How to improve performance of CALayer animations?

2 Answered Questions

1 Answered Questions

UIView transform

1 Answered Questions

[SOLVED] UIView perspective

Sponsored Content