I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:
.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;
}
How would I add the translate() function to make the player's top left corner exactly at (0, 0)?
If you want to be all the way at the top, no matter what else is on the page, position it absolute. This ignores everything up to the next highest positioned element That means it has a position other than the default. You can do that like this.
position: absolute;
top: 0;
left: 0;
/// You might need to adjust for your transform here though
oops... just saw that you already had it absolute. You were 90% of the way there.
For this .player needs a wrapped element with position: relative, and we don't need transform-origin or transform styles:
.parentOfPlayer {
position: relative;
}
.player {
position: absolute;
top: 0;
left: 0;
}