如何在css的变换属性中测量px，em，％？

Question

当我们在变换（translate）属性中使用em，px，％在CSS中沿X，Y方向移动元素时，这些单位是相对于什么进行测量（解析）的，它如何决定在其中移动多少方向？

Answer 1

您有2种情况：

1. 您正在使用length values或relative的absolute（px，em，ch等）。在这种情况下，将它们与translate一起使用时没有什么特别的，如果将它们与其他任何属性一起使用，它们将以相同的方式被解析（您可以参考所提供的链接以了解每个解析方式）。 / li>
2. 您正在使用百分比值。在这种情况下，该值将相对于元素本身的尺寸得到解析。因此，使用translateX(X%)意味着在X轴上平移 width 的X％，而translateY()将在逻辑上考虑高度。

更多详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate