How do I apply a perspective transform to a UIView?

Question

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!

Durbar

I am not sure if this is suitable for u or not but when I make animation, I found m14 is better for me Just for reference :) – Ascend

Thanks! - which values do you give this? – Durbar

By setting m14 you're actually skewing the view frustum on the X axis weirdly. The math is perfectly valid but it will make things kind of confusing in the general case. – Negativism

A very, very good article about CALayer 3D transformation and perspective, including a thorough explanation of the m34 field, can be found in this excellent article: core-animation-3d-model – Foushee

Answer 1

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.

Veradia

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

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

@Lecturer - 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. – Veradia

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

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

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

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?) – Cystotomy

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. – Galvin

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. – Negativism

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

@Niccolite - 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. – Veradia

@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 – Cutlet

@Niccolite 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. – Cutlet

Answer 2

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.

Squadron

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

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

Answer 3

Swift 5.0

func makeTransform(horizontalDegree: CGFloat, verticalDegree: CGFloat, maxVertical: CGFloat,rotateDegree: CGFloat, maxHorizontal: CGFloat) -> CATransform3D {
    var transform = CATransform3DIdentity
           
    transform.m34 = 1 / -500
    
    let xAnchor = (horizontalDegree / (2 * maxHorizontal)) + 0.5
    let yAnchor = (verticalDegree / (-2 * maxVertical)) + 0.5
    let anchor = CGPoint(x: xAnchor, y: yAnchor)
    
    setAnchorPoint(anchorPoint: anchor, forView: self.imgView)
    let hDegree  = (CGFloat(horizontalDegree) * .pi)  / 180
    let vDegree  = (CGFloat(verticalDegree) * .pi)  / 180
    let rDegree  = (CGFloat(rotateDegree) * .pi)  / 180
    transform = CATransform3DRotate(transform, vDegree , 1, 0, 0)
    transform = CATransform3DRotate(transform, hDegree , 0, 1, 0)
    transform = CATransform3DRotate(transform, rDegree , 0, 0, 1)
    
    return transform
}

func setAnchorPoint(anchorPoint: CGPoint, forView view: UIView) {
    var newPoint = CGPoint(x: view.bounds.size.width * anchorPoint.x, y: view.bounds.size.height * anchorPoint.y)
    var oldPoint = CGPoint(x: view.bounds.size.width * view.layer.anchorPoint.x, y: view.bounds.size.height * view.layer.anchorPoint.y)
    
    newPoint = newPoint.applying(view.transform)
    oldPoint = oldPoint.applying(view.transform)
    
    var position = view.layer.position
    position.x -= oldPoint.x
    position.x += newPoint.x
    
    position.y -= oldPoint.y
    position.y += newPoint.y
    
    print("Anchor: \(anchorPoint)")
    
    view.layer.position = position
    view.layer.anchorPoint = anchorPoint
}

you only need to call the function with your degree. for example:

var transform = makeTransform(horizontalDegree: 20.0 , verticalDegree: 25.0, maxVertical: 25, rotateDegree: 20, maxHorizontal: 25)
imgView.layer.transform = transform

Unbuild

Answer 4

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
    }

Droplight