如何使用css在Z軸上旋轉該立方體？

Question

我想將90deg旋轉到左邊，所以紅色T的最終目標位於立方體的右側，綠色線位於底部。

在立方體的初始位置上，T在立方體的左側，綠色線是X軸，紅色線是Y，青色線是Z軸。

此立方體的轉換現在像這樣在初始位置之後;

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

我假設在這個位置上我應該將紅色方塊旋轉到左邊來獲得我想要的東西。但是如果我把它旋轉90度在Y軸上假設紅線仍然是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);