角度如何在 3D 旋转中起作用？

Question

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

检查以下示例。

#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 角，另一个有 -ve 角！强>

我不明白这一点。我怎么理解？

Answer 1

在the specs你可以阅读：

rotate() = rotate( <angle> )
按角度指定 2D 旋转 在关于元素原点的参数中指定，如定义 通过 transform-origin 属性。例如，rotate(90deg) 将 使元素看起来旋转了四分之一圈 顺时针方向。
[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>