Question

I’m using a CATransform3D transformation to apply a pseudo 3D perspective effect to a view.

I’m using the gyroscope in the iPhone 4 to control the parameters of the transform.

The view I’m transforming has some subviews:

The result is something like this:

My next task is to either prevent the subviews from being transformed as the main view is transformed, or to apply an inverse transform so that the subviews remain unaffected.

My aim is to have each subview perpendicular to the superview, giving the impression that they are “standing”.

The code I’m using for the transform:

- (void)update:(NSTimer *)timer
{
    roll = [[[_manager deviceMotion] attitude] roll];
    pitch = [[[_manager deviceMotion] attitude] pitch];
    yaw = [[[_manager deviceMotion] attitude] yaw];

    CALayer *layer = [self.view layer];
    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, -90 * M_PI / 180.0f, 0.0f, 0.0f, 1.0f); // make landscape again  
    rotationAndPerspectiveTransform.m34 = 1.0 / -500; // apply the perspective
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, roll, 1.0f, 0.0f, 0.0f);
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, yaw, 0.0f, 0.0f, 1.0f);
    [layer setTransform:rotationAndPerspectiveTransform];       
}

I have tried the following code in an attempt to invert the transform, by applying a 90 degree perspective rotation to the subview around the Y axis:

for (UIView *subview in [self.view subviews])
{
    CALayer *sublayer = [subview layer];
//CATransform3D inverseTransformation = [sublayer transform];
CATransform3D inverseTransformation = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500; // apply perspective
inverseTransformation = CATransform3DRotate(inverseTransformation, 90 * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
[sublayer setTransform:inverseTransformation];
}

but all this succeeds in doing is making the subviews disappear. If I try to use the existing transform from the layer with [sublayer transform] and apply the 3d rotation to it, then the subviews flicker, but don’t rotate.

My knowledge of Matrix math isn’t great, so I don’t know if this is the correct approach.

How can I make the subviews sit perpendicular to the super view?

Answer 1

I recommend not trying to make the basic approach of calculating each individual transform work. Also, this would be easier using CALayers for each of the little sub views instead of the higher level UIView objects. The basic approach of building a 3D model, and transforming the entire model should work much better for you.

Start with the main layer, add a sublayer for each of the little squares, transform those sublayers into position, then your update: method listed in your question should work to transform everything without modification. John Blackburn has a nice little tutorial that should help greatly.