title: D3 svg css - rotate line around centre using css
body: <p>I have a plunker here - <a href="https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview</a></p>
  
  <p>I have 3 three bars that are made with a start and finish posiiton.</p>
  
  <p>The start position can be higher or lower than the finish.</p>
  
  <p>I want to draw arrows on the bars to illustrate if the start is before or after the finish.</p>
  
  <p>I'm drawing the arrows on the bars and adding classes based on if the bar is going up or down.</p>
  
  <p>I then wanted to use css to set the direction of the arrows by rotating them.</p>
  
  <p>This is all working but arrow is not rotating around its center and so is positioned off the bar.</p>
  
  <p>Is it possible to rotate the arrow and line around its center</p>
  
  <pre><code>.arrow-up{
    transform: rotate(180deg);
    transform-origin: center center;  
  }
  </code></pre>