css - Angular 如何在 3D 旋转中起作用？

Question

如您所知，对于 3D 转换，您需要像 rotateX(20deg) 这样的方法 我知道如何使用 2D 和 3D 转换，但我不明白 Angular 是如何工作的。我的意思是，如果我必须沿 X 轴沿 顺时针方向 旋转一个 div(我什至不知道顺时针/逆时针方向是对还是错)，我不知道是否使用 +ve Angular 或 -ve Angular ，直到我分别尝试它们以获得所需的旋转。

检查以下示例。

#wrapper {
  position: relative;
}
div[id^="d"] {
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 3em;
  text-align: center;
}
#d1 {
  background: red;
  top: 200px;
  left: 400px;
  transform: perspective(1000px) rotateY(70deg);
  transform-origin: right;
}
#d2 {
  background: blue;
  left: 600px;
  transform: perspective(1000px) rotateX(-70deg);
  transform-origin: bottom;
}
#d3 {
  background: purple;
  top: 200px;
  left: 800px;
  transform: perspective(1000px) rotateY(-70deg);
  transform-origin: left;
}
#d4 {
  background: grey;
  top: 200px;
  left: 600px;
}
#d5 {
  background: lightgreen;
  top: 400px;
  left: 600px;
  transform: perspective(1000px) rotateX(70deg);
  transform-origin: top;
}
#d6 {
  background: orange;
  top: 200px;
  left: 600px;
  z-index: 200;
}

    <div id="wrapper">
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">d4</div>
    <div id="d5">d5</div>
    <div id="d6">d6</div>
    </div>

我正在尝试制作一个立方体。无论如何，我相信我会毫无问题地做到这一点。但是如果你看到，d3 和 d5 都有顺时针旋转(根据我的说法)，但是一个有 +ve Angular ，另一个有 -ve Angular !

我不明白这个。怎么理解？

Answer 1

在the specs你可以阅读:

rotate() = rotate( <angle> )
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
[w3.org]

所以正值表示元素按顺时针方向旋转。示例:

div{
  display:inline-block;
  padding:5px 10px;
  border:2px solid;
  text-align:center;
  margin:50px;
}
.plus{
  transform:rotate(30deg);
}
.min{
  transform:rotate(-30deg);
}

<div class="plus">positive</div>
<div class="min">negative</div>

如果在测试之前需要先定义旋转方向，就得想象一下3d[XYZ]坐标系:

顺时针和逆时针方向适用于当箭头指向您时。对于 3d 立方体的具体示例，您将看到 #d3和 #d5不在同一个方向旋转。 #d5顺时针旋转但#d3不是。如果您“抬头看” Y 轴箭头指向您可以看到它在逆时针旋转。

这是另一个带有 rotateY() 的例子和 rotateX()转换。 rotateX()为正(顺时针方向)和rotateY()为负(逆时针方向):

div {
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid;
  text-align: center;
  margin: 50px;
  transform: perspective(1000px) rotateX(30deg);
  transition: transform 2s;
}
div:hover {
  transform: perspective(1000px) rotateY(-60deg) rotateX(30deg);
}

<div>hover me</div>