角度如何在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属性。例如，旋转（90度）会   导致元素出现旋转四分之一圈   顺时针方向。
  [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>