将角移得更远或更近的变换

Question

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

到目前为止，我只设法在 space 中将整个右、左、上或下平面移动得更远或更近，而不是角本身。我尝试更改 transform-origin 但它似乎无助于实现它。现在使用 transform-origin: top left;

在线转载： https://jsfiddle.net/alvarotrigo/q3zvm9wt/5/

Answer 1

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

The amount of rotation created by rotate3d() is specified by three <number>s and one <angle>. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation^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>

将角移得更远或更近的变换

Transformations to move corners further or closer

css

webkit

transform

css-transforms