CSS将游戏玩家置于其位置

Question

我正在使用React.js制作一款游戏，玩家元素是一个简单的图像，在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;
}

我该如何添加translate()函数使玩家的左上角正好位于(0,0)?

Answer 1

无论页面上有什么，如果你想要一直在顶部，请将其放置在绝对位置。这将忽略所有，直到下一个最高位置element这意味着它的位置不是默认的。你可以这样做。

position: absolute;
top: 0;
left: 0;
/// You might need to adjust for your transform here though

哦…只是看到你已经有了它的绝对值。你已经成功了90%。

Answer 2

对于这个.player需要用position: relative包裹元素，我们不需要transform-origin或transform样式:

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