Question

我找到了一些示例代码来解决我之前正在研究的问题，但并没有完全理解该解决方案。

<!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％，但是此示例似乎有所不同。

Answer 1

您可以尝试translate3D()，这是一种CSS方法，可以使用语法translate3d(tx, ty, tz)在3个平面（x，y和z）上移动对象。您可以查看this，它会更详细。

Answer 2

translate3D(tx, ty, tz)是一种CSS方法，用于根据3个笛卡尔平面x，y和z移动对象。当您将transform属性设置为-100%时，对象将在x平面的相反方向上相对移动100％。

Answer 3

如果您浏览the documentation for translate3d，则第一个变量为tx。

tx 是表示翻译矢量横坐标的长度或百分比。

根据Wikipedia，横坐标“是投影和轴原点之间的距离”。

因此，据此我们可以推测出这里的百分比是相对于您使用translate的形状的宽度而言的。

如果您的形状为100像素宽，则translate3d（100％，0，0）会将其向右移动100像素。

在此上下文中使用百分比（或任何百分比）时。它指的是什么？ -100％是什么？我了解有时身高：50％；会将高度设置为当前宽度的50％，但是此示例似乎有所不同。

您绝对正确！百分比通常是相对于父级的。此特定情况不同。 According to the docs：

百分比CSS数据类型表示一个百分比值。它通常用于定义相对于元素父对象的大小。

进一步阅读

Here's a great article on CSS，您可能会感兴趣。

尤其是在页面的2/3处，有一个标题“ Lengths”，您可能会发现对阐明px等绝对单位与百分比等相对单位的理解很有帮助。

Answer 4

相对于bounding box，其定义为

对象边界框是仅包含元素的几何形状的边界框。对于基本形状，这是填充的区域。除非另有说明，否则这就是无限定的术语“边界框”的含义。

由于translate3d的参数分别是x，y和z坐标，因此在示例中应用于x坐标的-100％会将其相对于其边界框向左移动100％。

百分比用作坐标值是指什么？

4 个答案: