Getting proper perspective with multiple UIViews - uiview

Question

I want to achieve a proper perspective "tilt" on two separate side-by-side UIView squares. In the image below the red and green squares are separate UIViews with the same transform applied. Visually this perspective is incorrect (is it?), or at least the superior illusion is shown by the Yellow/Blue square UIViews. The Yellow-Blue squares are actually subviews of a rectangular parent UIView, and the transform was applied to the parent view.
Here's the code:
#interface PEXViewController ()
#property (strong, nonatomic) IBOutlet UIView *redSquare;
#property (strong, nonatomic) IBOutlet UIView *greenSquare;
#property (strong, nonatomic) IBOutlet UIView *yellowSquareBlueSquare;
#end
#implementation PEXViewController
#define TILT_AMOUNT 0.65
-(void)tiltView:(UIView *)slave{
CATransform3D rotateX = CATransform3DIdentity;
rotateX.m34 = -1 / 500.0;
rotateX = CATransform3DRotate(rotateX, TILT_AMOUNT * M_PI_2, 1, 0, 0);
slave.layer.transform = rotateX;
}
- (void)viewDidLoad
{
[super viewDidLoad];
[self tiltView:self.greenSquare];
[self tiltView:self.redSquare];
[self tiltView:self.yellowSquareBlueSquare];
}
#end
1) Is there a simple way to apply a transform(s) to the separate red/green UIViews and achieve the same effect as the "grouped" yellow and blue UIViews? I prefer to keep the views separate, as this is a universal app and the UIViews are not side-by-side in (e.g.) the iPad layout.
2) If #1 is not possible, I am guessing the best thing to do is simply create a parent view that is present in say iPhone, but not present in iPad. Any other alternatives?

Answer 1

I opted for solution #2. I created a short routine that calculates a bounding box based on an array of UIViews, creates a new parent view from the bounding box, then adds the arrayed views as children. I then can apply the transform to the parent view for the desired effect. Here's the code for gathering and adopting children subviews.
-(UIView *)makeParentWithSubviews:(NSArray *)arrayOfViews{
// Creating a bounding box UIView and add the passed UIViews as subview
// "in-place".
CGFloat xMax = -HUGE_VALF;
CGFloat xMin = HUGE_VALF;
CGFloat yMax = -HUGE_VALF;
CGFloat yMin = HUGE_VALF;
for (UIView *myView in arrayOfViews) {
xMin = MIN(xMin, myView.frame.origin.x);
xMax = MAX(xMax, myView.frame.origin.x + myView.frame.size.width);
yMin = MIN(yMin, myView.frame.origin.y);
yMax = MAX(yMax, myView.frame.origin.y + myView.frame.size.height);
}
CGFloat parentWidth = xMax - xMin;
CGFloat parentHeight = yMax - yMin;
CGRect parentFrame = CGRectMake(xMin, yMin, parentWidth, parentHeight);
UIView *parentView = [[UIView alloc] initWithFrame:parentFrame];
// Replace each child's frame
for (UIView *myView in arrayOfViews){
myView.frame = [[myView superview] convertRect:myView.frame toView:parentView];
[myView removeFromSuperview];
[parentView addSubview:myView];
}
parentView.backgroundColor = [UIColor clearColor];
[self.view addSubview:parentView];
return parentView;
}