title: CSS to put the game player in its position
body: <p>I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:</p>
  <pre class="lang-css prettyprint-override"><code>.player {
      position: absolute;
      height: 32px;
      width: 32px;
      object-fit: none;
      transform-origin: 50% 50%;
      transform: scale(calc(var(--factor) / 2)) rotate(0.02deg);
      image-rendering: pixelated;
  }
  </code></pre>
  <p>How would I add the <code>translate()</code> function to make the player's top left corner exactly at (0, 0)?</p>