看看下图，实际上 Y+ 轴指向图表的顶部，Y- 轴指向图表的底部。即，正 Y 值表示的点应位于图表顶部，而负 Y 值表示的点应位于图表底部。
但是，当我在我的代码中使用 transform: translate(50px,100px) 时，它会像吹气图像一样显示出来。正如您所看到的，即使平移 Y 值为正，元素也被推向页面底部。
相反，它需要像下图一样(引用“正确格式”框)，也就是说，它应该被推向顶部。 (请原谅图片中的拼写错误)
请仔细看图
我的代码:
<!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>
最佳答案
以下是 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 轴垂直向下增加的坐标系，因此当您按正值平移时，元素向下移动(而不是向上移动)，反之亦然。
关于css - Y 轴与 translate() 的工作方式相反，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41479953/