Question

Based on an earlier stackoverflow suggestion, I am trying to create a playing card using CALayers added to a CATransformLayer. The idea is to create front and back CALayers and combine them in the CATransformLayer which can then be rotated, flipped, etc, with the proper side automatically showing. Below is example code trying to create a single card with a green front and a red back.

The red back is flipped about the Y-axis so that it is facing away from the green front. The green front calayer has a “higher” Z location than the red back.

When I do the transform though, I am simply seeing the card in what appears to be its non-flipped state. Any ideas where I am going wrong here?

#define DEGREES_TO_RADIANS(angle) (angle * M_PI / 180.0)

- (void)viewDidLoad
{
    [super viewDidLoad];

    CATransformLayer *cardContainer = [CATransformLayer layer];

    cardContainer.bounds = CGRectMake(0,0, 150,200);


    CALayer *cardFront  = [CALayer layer];
    cardFront.frame     = cardContainer.bounds;

    cardFront.backgroundColor = [UIColor greenColor].CGColor;
    cardFront.borderColor = [UIColor blackColor].CGColor;
    cardFront.borderWidth = 2.0;
    cardFront.cornerRadius = 30.0;
    cardFront.zPosition = 2; // Put front of card on top relative to back of card
    cardFront.doubleSided = NO;
    [cardContainer addSublayer:cardFront];

    CALayer *cardBack  = [CALayer layer];
    cardBack.frame     = cardContainer.bounds;
    cardBack.backgroundColor = [UIColor redColor].CGColor;
    cardBack.zPosition = 1;
    cardBack.doubleSided = NO;

    // Flip cardBack image so it is facing outward and visible when flipped
    cardBack.transform = CATransform3DMakeRotation(DEGREES_TO_RADIANS(180),0.0,1.0,0.0);
    [cardContainer addSublayer:cardBack];

    UIView* cardView = [[UIView alloc] initWithFrame:cardContainer.bounds];
    cardView.center = CGPointMake(self.view.center.x, self.view.center.y);
    [cardView.layer addSublayer:cardContainer];
    [self.view addSubview:cardView];

    // Show the card flipped over (desired the red side to be showing, but instead shows green)
    cardView.layer.transform = CATransform3DMakeRotation(DEGREES_TO_RADIANS(180),0.0,1.0,0.0);

}

Answer 1

Found the problem, you must apply the transform to the sublayerTransform property, as in:

cardView.layer.sublayerTransform = …