如何使用 css 在 Z 轴上旋转这个立方体？

Question

我想将这个立方体向左旋转 90 度，所以红色 T 的最终目的地将在立方体的右面，绿线将在底部。

立方体的初始位置，T在立方体的左边，绿线是X轴，红线是Y，青线是Z轴。

这个立方体的过渡现在在初始位置之后是这样的；

rotateX(-180deg) rotateY(-90deg) rotateZ(90deg)

我假设在这个位置我应该将立方体旋转到左边的红线以获得我想要的。但是如果我在 Y 轴上旋转 90 度，假设红线仍然是 Y 轴，这就是我得到的；

rotateX(-180deg) rotateY(0deg) rotateZ(90deg)

我也尝试过在 X 和 Z 上旋转，但没有给我想要的结果。

这是小提琴：http://jsfiddle.net/uv1Lt16z/1/

reset = function() {
  document.getElementById('cube').style.webkitTransform = "rotateX(-180deg) rotateY(-90deg) rotateZ(90deg)";
}

rotateLeftX = function() {
  document.getElementById('cube').style.webkitTransform = "rotateX(-90deg) rotateY(-90deg) rotateZ(90deg)";
};

rotateLeftY = function() {
  document.getElementById('cube').style.webkitTransform = "rotateX(-180deg) rotateY(0deg) rotateZ(90deg)";
};

rotateLeftZ = function() {
  document.getElementById('cube').style.webkitTransform = "rotateX(-180deg) rotateY(-90deg) rotateZ(180deg)";
};

reset();

#experiment {
  margin-top: 20%;
  -webkit-perspective: 140px;
  -webkit-perspective-origin: 50% 35px;
}
#cube {
  position: relative;
  margin: 0 auto;
  height: 70px;
  width: 70px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
}
.face {
  position: absolute;
  height: 60px;
  width: 60px;
  padding: 5px;
  background-color: rgba(50, 50, 50, 0.2);
}
#cube .ctop {
  -webkit-transform: rotateX(90deg) translateZ(35px);
}
#cube .cfront {
  -webkit-transform: translateZ(35px);
  border-bottom: 3px solid green;
  border-left: 3px solid red;
}
#cube .cright {
  -webkit-transform: rotateY(90deg) translateZ(35px);
}
#cube .cback {
  -webkit-transform: rotateY(180deg) translateZ(35px);
}
#cube .cleft {
  -webkit-transform: rotateY(-90deg) translateZ(35px);
  border-bottom: 3px solid cyan;
}
#cube .cdown {
  -webkit-transform: rotateX(-90deg) translateZ(35px) rotate(180deg);
}

<button onclick="rotateLeftX()">Rotate X axis</button>
<button onclick="rotateLeftY()">Rotate Y axis</button>
<button onclick="rotateLeftZ()">Rotate Z axis</button>
<button onclick="reset()">Reset</button>
<div id="experiment">
  <div id="cube">
    <div class="face ctop">

    </div>
    <div class="face cfront">

    </div>
    <div class="face cright">

    </div>
    <div class="face cback">

    </div>
    <div class="face cleft"> <span style="color: red;font-size: 72px;font-weight: bold;position: absolute;">T</span>
    </div>
    <div class="face cdown">

    </div>
  </div>
</div>

Answer 1

如果这是您想要的：变换不是谐波，但可以获得所需的结果。

http://jsfiddle.net/ThePragmatick/t98gv5e9/

transform: rotateX(-90deg) rotateY(0deg) rotateZ(180deg);