翻译X覆盖翻译Y

Question

我正在尝试创建不同的类来进行对齐。

我希望能够像class="left bottom"使用该transform:translate属性一样将其组合起来。

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

如果您查看我的小提琴并打开调试器，您会发现它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>

Answer 1

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

你必须嵌套它们：

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

或者将它们合并到一个类中：

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