Estoy creando un juego usando React.js, y el elemento del jugador es una imagen simple con imágenes de sprites implementadas en 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; } ¿Cómo agregaría la función translate() para hacer que la esquina superior izquierda del reproductor esté exactamente en (0, 0)?
Si desea estar en la parte superior, sin importar qué más haya en la página, colóquelo como absoluto. Esto ignora todo hasta el siguiente elemento en la posición más alta . Eso significa que tiene una posición diferente a la predeterminada. Puedes hacerlo así.
position: absolute; top: 0; left: 0; /// You might need to adjust for your transform here thoughups... acabo de ver que ya lo tenias absoluto. Has recorrido el 90% del camino.
Para esto, .player necesita un elemento envuelto con position: relative , y no necesitamos transform-origin o transform estilos:
.parentOfPlayer { position: relative; } .player { position: absolute; top: 0; left: 0; }