Introduction

A perspective effect on UIView is done through the underlying layer transform, not through a separate high-level UIKit API. In practice, you build a CATransform3D, set its perspective component, then apply rotations or translations. The main thing to understand is that this creates a 3D projection effect, not an arbitrary four-corner image warp.

Use CATransform3D and Set m34

Perspective in Core Animation is controlled by the m34 element of the transform matrix. A small negative value gives the visual effect of depth.

1import UIKit
2
3let cardView = UIView(frame: CGRect(x: 40, y: 100, width: 200, height: 120))
4cardView.backgroundColor = .systemBlue
5
6var transform = CATransform3DIdentity
7transform.m34 = -1.0 / 500.0
8transform = CATransform3DRotate(transform, .pi / 6, 1, 0, 0)
9
10cardView.layer.transform = transform

Without m34, the rotation still happens, but it looks flat because there is no perspective projection.

Apply Perspective from a Container When Multiple Views Share It

If several sibling views should appear in the same 3D space, apply the perspective to the container layer's sublayerTransform instead of setting a separate perspective on each child.

1import UIKit
2
3let container = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
4var perspective = CATransform3DIdentity
5perspective.m34 = -1.0 / 500.0
6container.layer.sublayerTransform = perspective
7
8let left = UIView(frame: CGRect(x: 40, y: 150, width: 100, height: 100))
9left.backgroundColor = .systemRed
10left.layer.transform = CATransform3DMakeRotation(.pi / 8, 0, 1, 0)
11container.addSubview(left)

This produces a more coherent scene because the children share one perspective projection.

Adjust the Anchor Point for Card-Flip Effects

By default, a view rotates around its center. For a book-opening or door-hinge effect, move the layer anchor point before applying the transform.

1cardView.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
2cardView.layer.position = CGPoint(x: 40, y: 160)
3
4var hinge = CATransform3DIdentity
5hinge.m34 = -1.0 / 500.0
6cardView.layer.transform = CATransform3DRotate(hinge, -.pi / 4, 0, 1, 0)

Changing the anchor point also changes positioning, so update the layer position deliberately. If you skip that step, the view often appears to jump.

Know the Limit of This Technique

Core Animation perspective transforms are great for rotations and depth effects, but they do not turn a UIView into a fully general perspective-warped quadrilateral. If you need each corner to move independently, you are in homography territory, which usually means a lower-level rendering approach.

That distinction matters because many questions use the phrase "perspective transform" to mean a freeform four-point warp. UIView layer transforms do not directly provide that abstraction.

For most interface work, that limit is acceptable. Card flips, cover-flow-style tilts, and panel reveals all fit well within the built-in layer transform model.

Animate the Transform Cleanly

Once the transform is correct, animation is straightforward.

1UIView.animate(withDuration: 0.3) {
2    var animated = CATransform3DIdentity
3    animated.m34 = -1.0 / 500.0
4    cardView.layer.transform = CATransform3DRotate(animated, .pi / 10, 0, 1, 0)
5}

The important part is to keep the m34 term in the animated target value. If you animate only the rotation and drop the perspective component, the effect changes midway.

Common Pitfalls

• Rotating a view in CATransform3D but forgetting to set m34, which removes the perspective effect.
• Applying separate perspective values to sibling views when they should share one 3D scene.
• Changing anchorPoint without correcting the layer position.
• Expecting UIView transforms to provide arbitrary four-corner warping.
• Animating to a target transform that omits the original perspective component.

Summary

• Use CATransform3D on the view's layer for perspective effects.
• Set m34 to a small negative value to introduce depth.
• Use a container sublayerTransform when several views should share the same perspective.
• Adjust anchorPoint for hinge-style motion.
• Use another rendering approach if you need a true freeform perspective warp.