转换以进一步或靠近角落

Question

我正在尝试从左上角旋转一个平面，以便将其放置在更远的空间中。

到目前为止，我仅设法将整个右，左，上或下平面在空间上进一步移动或靠近，但没有移动角本身。 我尝试更改transform-origin，但似乎无济于事。立即使用transform-origin: top left;

在线复制： https://jsfiddle.net/alvarotrigo/q3zvm9wt/5/

Answer 1

您可以考虑使用rotate3d()，在其中可以轻松地调整旋转轴以获得所需的效果：

  

由rotate3d()创建的旋转量由三个<number>和一个<angle>指定。 <number>代表表示旋转轴的矢量的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>