Преобразования для перемещения углов дальше или ближе

Question

Я пытаюсь повернуть плоскость из верхнего левого угла, чтобы она находилась дальше в пространстве.

До сих пор мне удавалось только перемещать всю правую, левую, верхнюю или нижнюю плоскости дальше или ближе в пространстве, но не сами углы. Я попытался изменить transform-origin, но, похоже, это не помогает его достичь. Используя сейчас transform-origin: top left;

Воспроизведение онлайн: https://jsfiddle.net/alvarotrigo/q3zvm9wt/5/

Answer 1

Можно рассмотреть использование rotate3d(), где вы можете легко отрегулировать ось вращения для получения необходимого эффекта:

Величина вращения, создаваемая rotate3d(), указывается тремя <number> с и одним <angle>. <number> s представляют координаты x, y и z вектора, обозначающего ось вращения. <angle> представляет угол поворота ^ref

.section-wrapper {
  perspective: 614px;
}

.section {
  transform-origin: top left;
  background: #ccc;
  position: absolute;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 500ms ease-in-out;
  transform: rotate3d(1, 1, 0, 60deg);
  ;
}

body {
  background: black;
}

html,
body,
.section-wrapper {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

<div class="section-wrapper">
  <div class="section phase1">
    <h1>Hello</h1>
  </div>
</div>