title: Rotate BarButtonItem by 45 degrees (animated)
body: <p>looks like animations are not my speciality :/</p>
  
  <p>In my navigation bar I have a custom BarButtonItem, a plus, to add stuff to the list. I wanted to rotate the plus by 45 degrees so it becomes a X when it was pressed and works as a cancel button then.</p>
  
  <p>I added a button as custom view to the BarButtonItem by doing this:</p>
  
  <pre><code>@IBOutlet weak var addQuestionaryButton: UIBarButtonItem!
  {
      didSet {
          let icon = UIImage(named: "add")
          let iconSize = CGRect(origin: CGPoint.zero, size: icon!.size)
          let iconButton = UIButton(frame: iconSize)
          iconButton.setBackgroundImage(icon, for: .normal)
          addQuestionaryButton.customView = iconButton
          iconButton.addTarget(self, action: #selector(QuestionaryListViewController.addClicked(_:)), for: .touchUpInside)
      }
  }
  </code></pre>
  
  <p>This seems to work fine.
  Now if the button is pressed I do the following:</p>
  
  <pre><code>UIView.animate(withDuration: 0.5, animations:{
              self.addQuestionaryButton.customView!.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_4))
          })
  </code></pre>
  
  <p>I can see the button starting to rotate but somehow it gets totally deformed. See the pictures for that:</p>
  
  <p>Before:</p>
  
  <p><a href="https://i.stack.imgur.com/sEFba.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sEFba.png" alt="Normal state, before it is pressed"></a></p>
  
  <p>After:</p>
  
  <p><a href="https://i.stack.imgur.com/NG2sn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NG2sn.png" alt="enter image description here"></a></p>
  
  <p>I don't understand why this happens. 
  How do I correctly animate the BarButtonItem?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Greetings</p>