[ACCEPTED]-How do I apply a perspective transform to a UIView?-calayer

Accepted answer
Score: 332

As Ben said, you'll need to work with the 26 UIView's layer, using a CATransform3D to perform the layer's rotation. The 25 trick to get perspective working, as described here, is 24 to directly access one of the matrix cells of 23 the CATransform3D (m34). Matrix math has never been 22 my thing, so I can't explain exactly why 21 this works, but it does. You'll need to 20 set this value to a negative fraction for 19 your initial transform, then apply your 18 layer rotation transforms to that. You 17 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 16 rebuilds the layer transform from scratch 15 for each rotation.

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

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

Score: 7

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

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

Score: 0

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 1 your degree. for example:

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

More Related questions