如何使用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但是thoose没有给我我想要的结果。

这是小提琴：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);