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

User · Accepted Answer

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

User · Answer

Swift 5 0 func makeTransform horizontalDegree  CGFloat  verticalDegree  CGFloat  maxVertical  CGFloat rotateDegree  CGFloat  maxHorizontal  CGFloat  - gt  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  quot Anchor    anchorPoint  quot            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

User · Answer

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

User · Answer

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  - gt  Int           return 10            func carousel   carousel  iCarousel  viewForItemAt index  Int  reusing view  UIView   - gt  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

User · Answer

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

User · Answer

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  - gt  Int           return 10            func carousel   carousel  iCarousel  viewForItemAt index  Int  reusing view  UIView   - gt  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

User · Answer

Swift 5 0 func makeTransform horizontalDegree  CGFloat  verticalDegree  CGFloat  maxVertical  CGFloat rotateDegree  CGFloat  maxHorizontal  CGFloat  - gt  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  quot Anchor    anchorPoint  quot            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

User · Answer

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

User · Answer

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

[ios] How do I apply a perspective transform to a UIView?

Examples related to ios

Examples related to cocoa-touch

Examples related to uiview

Examples related to core-animation

Examples related to calayer