Почему не работает transform: translate по оси z?

Question

У меня есть элемент, которому заданы transform: perspective(500px) и transform: translate(0 0 100px). Почему элемент не двигается по оси зет?

Кроме того, при добавлении transform: translate перестает работать rotate. Что я делаю не так? Большое спасибо.

Мои примеры - 1. Без добавления transform: translate

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: pink;
  transform: perspective(500px) rotateY(50deg);
  outline: 1px solid black;
}

<div class="block"></div>

С добавлением transform: translate

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: pink;
  transform: perspective(500px) rotateY(50deg) translate(0 0 100px);
  outline: 1px solid black;
}

<div class="block"></div>

Answer 1

Попробуйте использовать translateX/translateY/translateZ:

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: pink;
  transform: perspective(500px) rotateY(50deg) translateZ(100px);
  outline: 1px solid black;
}

<div class="block"></div>

Answer 2

Тут дело было в том, что само свойство transform: translate может задавать значение ТОЛЬКО для x, y. Что же касается оси z, то тут нужно отдельно прописывать translateZ и задавать ему значение.

!!!Также значения в transform: translate должны быть разделены запятой – transform: translate(100px, 200px) В противном случае свойство не будет работать.

БЛОГ НА HUSL

Почему не работает transform: translate по оси z?

Ответы (2 шт):