title: CABasicAnimation to make NSView flip
body: <p>I'm making a card game for mac and I'm using a CABasicAnimation to making the card flip around. It's almost working, but it could be a bit better.</p>
  
  <p>As it works now, the card flips inwards (to the left) - Screenshot 1. When the card has moved "flipped" all the way to the left, I change the image of the NSView and flip the card outwards again - Screenshot 2.</p>
  
  <p><strong>Screenshot 1 (flipping in):</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Iej7X.jpg" alt="Screenshot 1"></p>
  
  <p><strong>Screenshot 2 (flipping out):</strong></p>
  
  <p><img src="https://i.stack.imgur.com/DEPAK.jpg" alt="Screenshot 2"></p>
  
  <p><strong>Code for flipping in:</strong></p>
  
  <pre><code>- (void)flipAnimationInwards{
      // Animate shadow
      NSShadow *dropShadow = [[NSShadow alloc] init];
      [dropShadow setShadowOffset:NSMakeSize(0, 1)];
      [dropShadow setShadowBlurRadius:15];
      [dropShadow setShadowColor:[NSColor colorWithCalibratedWhite:0.0 alpha:0.5]];
      [[self animator] setShadow:dropShadow];
  
      // Create CAAnimation
      CABasicAnimation* rotationAnimation;
      rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
      rotationAnimation.fromValue = [NSNumber numberWithFloat: 0.0];
      rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI/2];
      rotationAnimation.duration = 3.1;
      rotationAnimation.repeatCount = 1.0; 
      rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
      rotationAnimation.fillMode = kCAFillModeForwards;
      rotationAnimation.removedOnCompletion = NO;
      [rotationAnimation setValue:@"flipAnimationInwards" forKey:@"flip"];
      rotationAnimation.delegate = self;
  
      // Get the layer
      CALayer* lr = [self layer];
  
      // Add perspective
      CATransform3D mt = CATransform3DIdentity;
      mt.m34 = 1.0/-1000;
      lr.transform = mt;
  
      // Set z position so the layer will be on top
      lr.zPosition = 999;
  
      // Keep cards tilted when flipping
      if(self.tiltCard)
          self.frameCenterRotation = self.frameCenterRotation;
  
      // Do rotation
      [lr addAnimation:rotationAnimation forKey:@"flip"];
  }
  </code></pre>
  
  <p><strong>The code for flipping out:</strong></p>
  
  <pre><code>- (void)flipAnimationOutwards{
      // Set correct image
      if (self.faceUp){
          [self setImage:self.faceImage];
      }else{
          [self setImage:[NSImage imageNamed:@"Card_Background"]];
      }
  
      // Animate shadow
      NSShadow *dropShadow = [[NSShadow alloc] init];
      [dropShadow setShadowOffset:NSMakeSize(0, 1)];
      [dropShadow setShadowBlurRadius:0];
      [dropShadow setShadowColor:[NSColor colorWithCalibratedWhite:0.0 alpha:0.0]];
      [[self animator] setShadow:dropShadow];
  
      // Create CAAnimation
      CABasicAnimation* rotationAnimation;
      rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
      rotationAnimation.fromValue = [NSNumber numberWithFloat: M_PI/2];
      rotationAnimation.toValue = [NSNumber numberWithFloat: 0.0];
      rotationAnimation.duration = 3.1;
      rotationAnimation.repeatCount = 1.0; 
      rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
      rotationAnimation.fillMode = kCAFillModeForwards;
      rotationAnimation.removedOnCompletion = YES;
      [rotationAnimation setValue:@"flipAnimationOutwards" forKey:@"flip"];
      rotationAnimation.delegate = self;
  
      // Get the layer
      CALayer* lr = [self layer];
  
      // Add perspective
      CATransform3D mt = CATransform3DIdentity;
      mt.m34 = 1.0/1000;
      lr.transform = mt;
  
      // Set z position so the layer will be on top
      lr.zPosition = 999;
  
      // Keep cards tilted when flipping
      if(self.tiltCard)
          self.frameCenterRotation = self.frameCenterRotation;
  
      // Commit animation
      [lr addAnimation:rotationAnimation forKey:@"flip"];
  }
  </code></pre>
  
  <p><strong>The problem:</strong></p>
  
  <p>The flipping out part looks fine. The right side of the card is taller/stretched than the left side, like it's supposed to be.</p>
  
  <p>Flipping in is not perfect though. Here the right side is smaller/stretched, when it should be the left side that is taller/stretched.</p>
  
  <p><strong>How do I make the left side taller/stretched on flipping in, instead of making the right side smaller/stretched?</strong></p>