我找到了一些示例代码来解决我之前正在查看的问题，但并没有完全理解该解决方案。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
/* Standard syntax */
@keyframes example {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
这是一些示例代码，它将从左侧拉出图像并在四秒钟的时间内显示它。但是我不理解本示例中使用的百分比，特别是
transform: translate3d(-100%, 0, 0);在此上下文中使用百分数或任何百分数时。它指的是什么？ -100％是什么？我知道有时
height: 50%;会将高度设置为当前宽度的50％，但是此示例似乎有所不同。 最佳答案
您可以尝试使用translate3D()这是一种CSS方法，使用语法translate3d(tx, ty, tz)在3个平面（x，y和z）上移动对象。您可以查看this，其中有更多详细信息。
关于html - 当用作坐标值时，百分比指的是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53901307/