html - translateX 覆盖 translateY

Question

我正在尝试制作不同的类以进行对齐。

我希望能够像 class="left bottom" 使用 transform:translate 属性那样组合它。

问题是该属性正在被彼此覆盖。

如果您查看我的 fiddle 并打开调试器，您会注意到 translateX(50%) 已被 translateY(25%) 覆盖。它们不应该像 translate(50%,25%) 那样组合吗？

.container {
  background: gray;
  height: 100px;
  width: 100%;
}
.left {
  transform: translateX(50%);
}
.bottom {
  transform: translateY(25%);
}

<div class="container">
  <div class="left bottom">
    I should be aligned
  </div>
</div>

https://jsfiddle.net/r2LmfqLs

Answer 1

这是完全正确的，因为您正在更改 transform 参数。

你必须嵌套它们:

.left.bottom {
    transform: translateX(50%) translateY(25%);
}

或者将它们合并为一个类:

.left-bottom {
    transform: translateX(50%) translateY(25%);
}