Question

From a couple of previous StackOverFlow questions and this example on github CA360, I’ve managed to simulate a flipping card with an image on the “front” and text on the back. However, the text on the back of the card is upside down and I only got it to center horizonatally. How can I orient the text properly and center it vertically on my card?

Card front:

Card back (How to orient and center text vertically?):

[Update]

I set the opacity on my top layer to 0.5 then I got the idea to just “pre-flip” the back layer so that when the actual flip happened that it would just reset it back to normal.

My “pre-flip” looks like this:

cardBack.transform = CATransform3DMakeRotation(M_PI, 1.0f, 0.0f, 0.0f); // Pre-flip card

Now I just need to find a built-in way to vertical setting or do it the hard way… Half the distance…font height… plus…

Set up card container with 2 layers
(Reference):

    - (void)loadView {
        UIView *myView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        myView.backgroundColor = [UIColor whiteColor];

        self.view = myView;

        cardContainer = [CATransformLayer layer];
        cardContainer.frame = CGRectMake(300, 250, 200, 150);


        CALayer *cardFront  = [CALayer layer];
        cardFront.frame     = cardContainer.bounds;
        cardFront.zPosition = 5;   // Higher than the zPosition of the back of the card
        cardFront.contents  = (id)[UIImage imageNamed:@"Ben"].CGImage;
        cardFront.opacity = 0.5;

        [cardContainer addSublayer:cardFront];

        /*
         https://stackoverflow.com/questions/2209734/add-text-to-calayer
         */

        CATextLayer *cardBack  = [CATextLayer layer];
        cardBack.string = @"Hello";
        cardBack.frame     = cardContainer.bounds;
        cardBack.zPosition = 4;
        cardBack.backgroundColor = [[UIColor grayColor] CGColor];
        cardBack.alignmentMode = kCAAlignmentCenter;
        CFTypeRef *font = (CFTypeRef *)CTFontCreateWithName(CFSTR("Times"), 48, NULL);
        cardBack.font = font;
        [cardContainer addSublayer: cardBack];

        [self.view.layer addSublayer:cardContainer];

    }

Code borrowed from another SOF question to flip card:

    - (void) flipCard {
    //    [self.flipTimer invalidate];
    //    if (flipped){
    //        return;
    //    }
        NSLog(@"Count=%d", count);
        id animationsBlock = ^{
    //        self.backView.alpha = 1.0f;
    //        self.frontView.alpha = 0.0f;
    //        [self bringSubviewToFront:self.frontView];
    //        flipped = YES;
            NSLog(@"Flipping...");
            CALayer *layer = cardContainer;
            CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
           rotationAndPerspectiveTransform.m34 = 1.0 / 500;

            if (count == 0) {


                rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 1.0f, 0.0f, 0.0f);
            } else {  // flip it back to image

                rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 0.0f, 0.0f, 1.0f, 1.0f);

            }
            layer.transform = rotationAndPerspectiveTransform;
        };
        count = (count + 1) % 2;

        [UIView animateWithDuration:1.25
                              delay:0.0
                            options: UIViewAnimationCurveEaseInOut
                         animations:animationsBlock
                         completion:nil];

    }

Answer 1

Are you aware of the UIView class method:

• (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

You would have two views, the front and the back. both can be in your nib. With this call, you can flip from one view to the other view with almost no effort.

EDIT: I did look at your code. Note that anchorPoint, position, and bounds all play together, but you can still use frame. Its interesting (dare I say fun) to play with changing one and seeing how the others change.

What I ended up doing is comment out all setting of position and frame, and essentially set the text box frame as I would with a UIView (width of large view minus width of small view divided by 2,etc):

cardBackText.frame = CGRectMake((200-100)/2, (150-30)/2, 100,30); // 200, 150
NSLog(@"position=%@ anchorPoint=%@ bounds=%@", NSStringFromCGPoint(cardBackText.position),NSStringFromCGPoint(cardBackText.anchorPoint),NSStringFromCGRect

The log printed this out:

position={100, 75} anchorPoint={0.5, 0.5} bounds={{0, 0}, {100, 30}}