1

I want to achieve the effect same as the attached image. How can I place a view at certain angle? I tried using UIBezierPath with no success.

Tilted View

Sanket_B
  • 735
  • 9
  • 26

2 Answers2

4

You can use CATransform3DRotate alongside the m34 property, which manages depth. Just make sure you set m34 before the rotation.

override func viewDidLoad() {
    super.viewDidLoad()
    
    var transform = CATransform3DIdentity
    transform.m34 = -1.0 / 500.0
    transform = CATransform3DRotate(transform, 15 * .pi / 180, 1, 0, 0)
         
    cardView.backgroundColor = .systemBlue
    cardView.layer.cornerRadius = 8
    cardView.layer.transform = transform
}

Result:

Blue card with perspective, looks like it's tilting forwards (bottom edge is wider than top edge)
aheze
  • 24,434
  • 8
  • 68
  • 125
2

You can use CATransform3DConcat Apple doc

view.layer.transform = CATransform3DConcat(view.layer.transform, CATransform3DMakeRotation(.pi/4, .zero, .zero, .zero))
Bogdan Belogurov
  • 91
  • 6
  • 1
    I think you meant `view.layer.transform = CATransform3DConcat(view.layer.transform, CATransform3DMakeRotation(.pi/4, .zero, .zero, .zero))` (`view.transform` is a CGAffineTransform, while `view.layer.transform` is a CATransform3D). – aheze May 16 '21 at 21:08