translateX overrides translateY

Question

I'm trying to make different classes for alignment.

I want to be able to combine it like class="left bottom" using the transform:translate property.

The problem is that the property is being overridden by each other.

If you have a look at my fiddle and open up the debugger you will notice that translateX(50%) has been overridden by translateY(25%). Shouldn't they be combined like 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

This is perfectly correct, because you are changing the transform parameter.

You have to nest them:

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

Or combine them to one class:

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

Answer 2

No, there is only one transform property but two values, so which ever comes last...wins.

You could make one "combined" class...like so.

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

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