Y 轴与 translate() 的工作方式相反

Question

看看下图，实际上 Y+ 轴朝向图表的顶部，Y- 轴朝向图表的底部。也就是说，正 Y 值表示的点应该在图表的顶部，而负 Y 值表示的点应该在底部。

但是，当我在我的代码中使用 transform: translate(50px,100px) 时，它会像打击图像一样出现。正如您所看到的，即使平移 Y 值为正，元素也被推向页面底部。

相反，它需要像下图一样（参考 "Right format" 框），也就是说，它应该被推向顶部。 (请原谅图片中的错别字)

请仔细看图

我的代码：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore consequatur amet nemo numquam, a perspiciatis maxime necessitatibus laudantium adipisci tempore,
</div>

</body>
</html>

Answer 1

以下是来自W3C Spec for Transform Rendering Model的摘录：

The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards. Three-dimensional transform functions extend this coordinate space into three dimensions, adding a Z axis perpendicular to the plane of the screen, that increases towards the viewer.

如您所见，它使用 Y 轴垂直向下增加的坐标系，因此当您平移一个正值时，元素向下移动（而不是向上移动），反之亦然。

Answer 2

记住这一点的最简单方法是使用与 Y 方向相反的方向。在你的情况下，你必须写 transform: translate(50px, -100px);

Y 轴与 translate() 的工作方式相反

Y-axis working opposite way for translate()

css

css-transforms