title: CAKeyframeAnimation rotation direction issue for "transform.rotation.x"
body: <p>I'm trying to make a 3D card flip animation.
  When i change values for different keyPath  rotating direction changes as expected but i can't change the rotation direction for <strong>transform.rotation.x</strong></p>
  <p>I tried using negative degrees for animationXtop.values or animationXbottom.values which doesn't change the behavior.</p>
  <p>At the moment my top card flips towards inside but i want to achieve the opposite also the bottom card is rotating in wrong direction.</p>
  <pre><code>extension ViewController {
  
  func animateVertical(topView: UIView, bottomView: UIView) {
  
      let animationXtop = CAKeyframeAnimation(keyPath: &quot;transform.rotation.x&quot;)
      animationXtop.timingFunctions = [CAMediaTimingFunction(name: .easeIn)]
      animationXtop.values = deg2rad([0, 78, 93])
  
      let animationXbottom = CAKeyframeAnimation(keyPath: &quot;transform.rotation.x&quot;)
      animationXbottom.values = deg2rad([273, 303, 354, 365, 360])
                                        
      let animationYtop = CAKeyframeAnimation(keyPath: &quot;transform.rotation.y&quot;)
      animationYtop.values = deg2rad([0, 3, 2])
      animationYtop.timingFunctions = [CAMediaTimingFunction(name: .easeIn)]
  
      let animationYbottom = CAKeyframeAnimation(keyPath: &quot;transform.rotation.y&quot;)
      animationYbottom.values = deg2rad([2, 1, 0, 0, 0])
  
      let animationZtop = CAKeyframeAnimation(keyPath: &quot;transform.rotation.z&quot;)
      animationZtop.values = deg2rad([0, -1, -2])
  
      let animationZbottom = CAKeyframeAnimation(keyPath: &quot;transform.rotation.z&quot;)
      animationZbottom.values = deg2rad([-2, -1, 0, 0, 0])
  
      [animationXtop, animationYtop, animationZtop].forEach({
          $0.keyTimes = [0, 0.9, 1]
          $0.duration = animationDuration
          $0.fillMode = .forwards
          $0.isAdditive = true
          $0.isRemovedOnCompletion = false
          $0.calculationMode = .paced
          $0.rotationMode = .rotateAuto
      })
  
      [animationXbottom, animationYbottom, animationZbottom].forEach({
          $0.keyTimes = [0, 0.1, 0.35, 0.65, 1]
          $0.duration = animationDuration
          $0.isAdditive = true
          $0.beginTime = CACurrentMediaTime() + animationDuration
          $0.fillMode = .forwards
          $0.isRemovedOnCompletion = false
          $0.calculationMode = .paced
          $0.rotationMode = .rotateAuto
      })
  
      topView.isHidden = false
      bottomView.isHidden = true
  
      DispatchQueue.main.async {
          topView.layer.add(animationXtop, forKey: &quot;x-coord&quot;)
          topView.layer.add(animationYtop, forKey: &quot;y-coord&quot;)
          topView.layer.add(animationZtop, forKey: &quot;z-coord&quot;)
  
          bottomView.layer.add(animationXbottom, forKey: &quot;x-coord&quot;)
          bottomView.layer.add(animationYbottom, forKey: &quot;y-coord&quot;)
          bottomView.layer.add(animationZbottom, forKey: &quot;z-coord&quot;)
      }
  
      DispatchQueue.main.asyncAfter(deadline: .now() + animationDuration) {
          self.view.bringSubviewToFront(bottomView)
          bottomView.isHidden = false
          topView.isHidden = true
      }
  }
  
  
  // MARK: - Helper Methods
  
  private func deg2rad(_ degrees: [Int]) -&gt; [Double] {
      return degrees.map({ Double($0) * .pi / 180 })
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Ni89o.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ni89o.gif" alt="enter image description here" /></a></p>