title: Orienting text on the back of a flipped card?
body: <p>From a couple of previous StackOverFlow <a href="https://stackoverflow.com/questions/9656071/how-to-flip-a-uiview-around-the-x-axis-while-simultaneously-switching-subviews">questions</a> and this example on github <a href="https://github.com/neror/CA360/" rel="nofollow noreferrer">CA360</a>, 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?</p>
  
  <p>Card front:</p>
  
  <p><img src="https://i.stack.imgur.com/z325C.png" alt="enter image description here"></p>
  
  <p>Card back (How to orient and center text vertically?):</p>
  
  <p><img src="https://i.stack.imgur.com/J7lGS.png" alt="enter image description here"></p>
  
  <p><b>[Update]</b></p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/AYOkq.png" alt="enter image description here"></p>
  
  <p>My "pre-flip" looks like this:</p>
  
  <pre><code>cardBack.transform = CATransform3DMakeRotation(M_PI, 1.0f, 0.0f, 0.0f); // Pre-flip card
  </code></pre>
  
  <p>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...</p>
  
  <p>Set up card container with 2 layers
  (<a href="https://stackoverflow.com/questions/9656071/how-to-flip-a-uiview-around-the-x-axis-while-simultaneously-switching-subviews/9658527#9658527">Reference</a>):</p>
  
  <pre>
  
      - (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];
  
      }
  
  </pre>
  
  <p>Code borrowed from another SOF question to flip card:</p>
  
  <pre>
  
      - (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];
  
      }
  
  </pre>