我找到了一些示例代码来解决我之前看到但并不完全理解解决方案的问题。
<!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,兹)。你可以看看this其中有更多详细信息。
关于html - 百分比用作坐标值时指的是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53901307/