Question

看一下下面的图像，实际上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>

Answer 1

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

坐标空间是一个有两个轴的坐标系：X轴向右水平增加; Y轴垂直向下增加 。三维变换函数将此坐标空间扩展为三维，添加垂直于屏幕平面的Z轴，朝向观看者增加。

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

Answer 2

记住这一点的最简单方法是使用Y方向的相反方向。对于您的情况，您必须编写以下转换：translate（50px，-100px）;

Y轴以相反的方式工作，用于翻译（）

2 个答案: