translateX覆盖translateY

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>

https://jsfiddle.net/r2LmfqLs

Answer 1

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

你必须嵌套它们：

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

或者将它们组合成一个类：

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

Answer 2

不，只有一个transform 属性，但只有两个值，所以最后一次......胜利。

你可以制作一个“组合”课程......就像这样。

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

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