CSS變換在我的代碼輪播不工作

我試圖創建的CSS3轉換簡單的演示，我得到了打，因爲我無法看到的元素旋轉當我使用transform:rotate(180deg)CSS變換在我的代碼輪播不工作

看到codepen：http://codepen.io/shmdhussain/pen/yYMWba

HTML：

<div class="box transz"></div> 
<div class="box rotatex"></div>

CSS：

.box { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
} 

.transz { 
    /*Translate Z transform*/ 
    transform: translate3d(100px, 200px, 100px); 
} 

.rotatex { 
    transform: rotate(180deg); 
}

來源

2015-10-05 Mohamed Hussain

我很困惑，因爲你的困惑。對我來說，你的codepen工作得很好。旋轉變換將採用原始形狀，並按照指定的度數旋轉一次。在你的情況下，你只是旋轉90/180/270度的方塊，這看起來與原來的相同。如果你旋轉45度的東西，你應該看到一個結果。道歉，如果有更復雜的問題，我沒有看到！

來源

2015-10-05 06:47:53 forsooth

在簡單的calc中感到困惑，對不起。得到它了。有關z軸變換轉換的任何線索：translate3d（100px，200px，100px）; –

此外，我正在使用完美的廣場，只有我無法看到90,270度旋轉。明白了。 translate3d –

的任何幫助沒問題，但你是什麼意思？你從那個變換中尋找什麼行爲？你在那裏的代碼應該稍微移動你的方塊。 – forsooth

CSS變換在我的代碼輪播不工作

回答

相關問題