CSS to put the game player in its position-CodePudding

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)?

CodePudding user response：

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.

CodePudding user response：

for this .player wrapped block need style:

   .parentOfPlayer { 
       position : relative 
                   }

and need style to

.player {
      position: absolute; top: 0; left: 0; 
        }

and we don't nedd transform origin and transform styles