Y 轴与 translate() 工作相反的方式
AB *_*dik 3 css css-transforms
看看下图，实际上 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的摘录：
坐标空间是一个有两个轴的坐标系：X轴向右水平增加；Y 轴垂直向下增加。三维变换函数将这个坐标空间扩展到三个维度，添加一个垂直于屏幕平面的 Z 轴，该轴向观看者方向增加。
正如您所看到的，它使用一个坐标系，其中 Y 轴垂直向下增加，因此当您平移正值时，元素向下移动（而不是向上移动），反之亦然。
| 归档时间： |
|
| 查看次数： |
1053 次 |
| 最近记录： |