旋轉盒子後，盒子是不同的。（CSS變換保留-3D旋轉）

我'嘗試與像老虎機文本旋轉框。我使用純CSS。我覺得它的工作原理，到目前爲止，但我確實有該旋轉箱是旋轉後小的問題。這裏是我的代碼： jsfiddle 旋轉盒子後，盒子是不同的。（CSS變換保留-3D旋轉）

主要的代碼都是在這裏完成：

#category_wrapper.show-unten{ 
    -webkit-transform: translateZ(-5px) rotateX(90deg); 
    -moz-transform: translateZ(-75px) rotateX(90deg); 
    -ms-transform: translateZ(-75px) rotateX(90deg); 
    -o-transform: translateZ(-75px) rotateX(90deg); 
    transform: translateZ(-75px) rotateX(90deg); 

}

這是bug還是我什麼了嗎？

來源

2013-06-25 hamburger

他們看起來是一樣的我。 Chrome檢查器中的211x106。此外，在你的'-webkit-transform'，'translateZ'是'-5px'而不是'-75px'。 – casraf

更新http://jsfiddle.net/Yg4w7/7/但在Firefox它仍然較小 – hamburger

只是信息我的回答是隻對火狐狸這樣做對所有的瀏覽器檢查： http://stackoverflow.com/問題/ 11026200 /旋轉文本與 - CSS3，HTML5？answertab =＃投票製表頂部 – Muath

僅使用此：

#category_wrapper.show-unten{ 
-webkit-transform: translateZ(-5px) rotateX(90deg); 
-moz-transform: translateZ(-75px) rotateX(90deg); 
-ms-transform: translateZ(-75px) rotateX(90deg); 
-o-transform: translateZ(-75px) rotateX(90deg); 
transform: translateZ(0px) rotateX(90deg); 

}

在最後一行的變化看==>變換：translateZ（0像素）rotateX（90度）;

，並使用此：

transform: rotateX(-100deg) translateZ(75px); //instead of -90 deg in class .unten

我更新您的jsfiddle =>Jsfiddle

來源

2013-06-25 12:19:36 Muath

編輯後檢查 – Muath

旋轉盒子後，盒子是不同的。 （CSS變換保留-3D旋轉）

回答

相關問題

旋轉盒子後，盒子是不同的。（CSS變換保留-3D旋轉）