adding distort with vanishing point projection to CAlayer

Question

I would like to transform a UIView in way that adds a perspective (with two vanishing points) to it (see below).

The reason why I want to do this with a view is because I want the contents of the transformed view to be the cells of a UITableView.

I am new to this kind of coding but I assume that I would have to change the CALayer that belongs to the subview. However, I believe, the transformation I am interested in cannot be created using CATransform3D.

Does anyone have an idea how to approach this problem?

Answer 1

It seems I have found a way to circumvent/solve the problem:

Using CATransform3D transformations it is possible to approximate the to vantage points by splitting the view into two parts (two independent UITableViews). These should be managed by a UIViewController (not the UITableViewController provided by x code) which implements the necessary and protocols.

Then in the viewDidLayoutSubviews: method use the following code to transform the two tableviews.

- (void) viewDidLayoutSubviews {

     CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    // left View
    // vantage point
    rotationAndPerspectiveTransform.m34 = 1.0 / -150.0;
    // Z-rotation of 90°
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 90.0 * M_PI/180.0, 0, 0,1);
    // X-rotation of 25°
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, -25.0 * M_PI/180.0, 1, 0,0);
    // left view
    [self.view viewWithTag:1].layer.transform = rotationAndPerspectiveTransform;


    //right view
    rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0 / -150;
    // Z-rotation of 90°
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 90.0 * M_PI / 180.0, 0, 0,1);
    // X-rotation of 30°
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 25.0 * M_PI / 180.0, 1, 0,0);
    // right view
    [self.view viewWithTag:2].layer.transform = rotationAndPerspectiveTransform;
}

Once transformed the two tableview can be shifted so that they neatly fit together. The only remaining job is to connect the scrolling of one tv with the other. I haven't figured that one out yet.