title: How to rotate background-image in css?
body: <p>I have a background image with a style called north:</p>
  
  <pre><code>.north {
      background-image: url("./images/turtle-north.png");
      background-repeat: no-repeat;
      background-size: 50px 50px;
  }
  </code></pre>
  
  <p>This is part of a reactjs component that renders a grid. The image displays fine with this rule. However when I try to rotate it with this rule:</p>
  
  <pre><code>.rotate_ninety {
      -moz-transform: rotate(90deg) translateX(150px);
      -webkit-transform: rotate(90deg) translateX(150px);
      -o-transform: rotate(90deg) translateX(150px);
      -ms-transform: rotate(90deg) translateX(150px);
      transform: rotate(90deg) translateX(150px);
  }
  </code></pre>
  
  <p>The img is pushed down ie not at the top left position in the grid anymore. How can I rotate the image and keep this position?</p>