title: Update the rotation of a CALayer
body: <p>I am trying to update the current rotation (and sometimes the position) of a CALayer.</p>
  
  <p>What I am trying to in a couple of simple steps:</p>
  
  <ol>
  <li>Store a couple of <code>CALayers</code> in an array, so I can reuse them</li>
  <li>Set the anchor point of all CALayers to 0,0.</li>
  <li>Draw <code>CALayer</code> objects where the object starts at a position on a circle</li>
  <li>The layers are rotated by the same angle as the circle at that position</li>
  <li>Update the position and rotation of the CALayer to match new values</li>
  </ol>
  
  <p>Here is a piece of code I have:</p>
  
  <p><code>lineWidth</code> is the width of a line<br>
  <code>self.items</code> is an array containing the <code>CALayer</code> objects</p>
  
  <pre><code>func updateLines() {
  
      var space = 2 * M_PI * Double(circleRadius);
      var spaceAvailable = space / (lineWidth)
  
      var visibleItems = [Int]();
  
      var startIndex = items.count - Int(spaceAvailable);
      if (startIndex &lt; 0) {
          startIndex = 0;
      }
  
      for (var i = startIndex; i &lt; self.items.count; i++) {
          visibleItems.append(self.items[i]);
      }
  
      var circleCenter = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
  
      /* Each line should move up and rotate accordin to this value */
      var anglePerLine: CGFloat = (360 / CGFloat(visibleItems.count)).toRadians()
  
      /* Starting position, 270 degrees is on top */
      var startAngle: CGFloat = CGFloat(270).toRadians();
  
      /* Lines default rotation, we rotate it to get the right side up */
      var lineAngle: CGFloat = CGFloat(180).toRadians();
  
      for (var itemIndex = 0; itemIndex &lt; visibleItems.count; itemIndex++) {
          var itemLayer = self.itemLayers[itemIndex];
          itemLayer.opacity = 1 - ((0.9 / visibleItems.count) * itemIndex);
  
          /* Calculate start position of layer */
          var x = CGFloat(circleRadius) * cos(startAngle) + CGFloat(circleCenter.x);
          var y = CGFloat(circleRadius) * sin(startAngle) + CGFloat(circleCenter.y);
          var height = CGFloat((arc4random() % 80) + 10);
  
          /* Set position and frame of layer */
          itemLayer.frame = CGRectMake(CGFloat(x), CGFloat(y), CGFloat(lineWidth), height);
          itemLayer.position = CGPointMake(CGFloat(x), CGFloat(y));
  
          var currentRotation = CGFloat((itemLayer.valueForKeyPath("transform.rotation.z") as NSNumber).floatValue);
          var newRotation = lineAngle - currentRotation;
  
          var rotationTransform = CATransform3DRotate(itemLayer.transform, CGFloat(newRotation), 0, 0, 1);
          itemLayer.transform = rotationTransform;
  
          lineAngle += anglePerLine;
          startAngle += anglePerLine;
      }
  }
  </code></pre>
  
  <p>The result of the first  run is exactly as I want it to be:</p>
  
  <p><img src="https://i.stack.imgur.com/iA0LI.png" alt="enter image description here"></p>
  
  <p>The second run through this code just doesn't update the CALayers correctly and it starts to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/4GqVE.png" alt="enter image description here"></p>
  
  <p>I think it has to do with my code to update the <code>location</code> and <code>transform</code> properties of the CALayer, but whatever I do, it always results in the last picture.</p>