перспектива и перевестиZ движется по диагонали - PullRequest
Новая
       35

перспектива и перевестиZ движется по диагонали

0 голосов
/ 04 марта 2019

Ссылка на эту ссылку: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

Необходимо установить перспективу для перемещения дочернего элемента вдоль оси z.Ссылка выше показывает примеры различных значений перспективы, все из которых устанавливают ось Z в диагональном направлении.

Если я смотрю прямо на лицо трехмерного куба и двигаю его назад (вдоль оси z), это будет выглядеть так, как будто оно становится меньше (удаляется от меня), а не движется по диагонали.Так почему же CSS имеет диагональную ось Z по умолчанию?Есть ли способ использовать перспективу и translateZ с осью z, которая точно отходит от пользователя?

Какой-то код, с которым я тестировал это: 

.wrapper {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  transform-style: preserve-3d;
}

.cube {
  transform-origin: 50% 50%;
  transform: translateZ(-1px);
}

<div class="wrapper">
  <div class="cube"></div>
</div>

1 Ответ

0 голосов
/ 04 марта 2019

Все зависит от perspective-origin, который определяет, как изменения должны быть видимы для нас.

Если вы прочитаете ту же ссылку, вы заметите это:

The точка схода по умолчанию размещена в центре элемента, но ее положение можно изменить с помощью свойства origin-origin.

Вот несколько примеровгде вы можете лучше понять: 

.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid;
  perspective: 10px;
  transform-style: preserve-3d;
}

.cube {
  width: 100%;
  height: 100%;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: translateZ(-10px);
  }
}
moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube"></div>
</div>

Необходимо также обратить внимание, когда вы имеете дело с элементом блока по умолчанию, имеющим width:100%, поскольку позиция будет считать родительский элемент не дочерним.

Уберите ширину и увидите разницу: 

.wrapper {
  position: relative;
  border: 1px solid;
  perspective: 10px;
  transform-style: preserve-3d;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: translateZ(-10px);
  }
}
moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube"></div>
</div>

В вышеприведенных кодах родительский контейнер управляет перспективой.Вы можете переместить это в дочерний элемент следующим образом: 

.wrapper {
  position: relative;
  border: 1px solid;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: perspective(10px) translateZ(-10px);
  }
}
moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" >
  <div class="cube" style="transform-origin:left"></div>
</div>
moving from a custom point
<div class="wrapper" >
  <div class="cube" style="transform-origin:20% 80%"></div>
</div>

Как видите, мы контролируем источник, используя transform-origin, потому что мы используем перспективу transform-function и не болеесвойство.

Измените perspective-origin и ничего не произойдет 

.wrapper {
  position: relative;
  border: 1px solid;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: perspective(10px) translateZ(-10px);
  }
}
moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube" style="perspective-origin:left"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube" style="perspective-origin:20% 80%"></div>
</div>
...