準確測量的說明css 3d立方體

Question

我已經根據此示例創建了一個立方體。 http://css3.bradshawenterprises.com/transforms/#cubecarousel

我需要了解的是如何獲得正面的確切尺寸（例如200px）？

通常你定義立方體的面，然後在對象的一半處應用變換（50％），以便對象向前移動。 我如何將它推回來，使面朝200面？

謝謝

Answer 1

您應該發佈您的當前代碼。

無論如何，我猜你目前的圖像是200px？

然後考慮到（從你的鏈接）：

3D圖像滑塊
注意，因爲這樣一個立方體的作品，圖像 移出朝屏幕，更大比它應該是。你應該將它移回圖像寬度的一半，以確保它是正常尺寸的 。

如果向後翻譯您的立方體100px（寬度的一半），您的圖像將精確地爲200px。

如果你的圖片是不是200像素，絕對發佈您的代碼

Answer 2

好，這裏是提琴：jsfiddle.net/K99GS我試着向後推，但因此它從錯誤的原點旋轉，它改變了支點。 ..

Answer 3

好的後，嘗試了一天......我發現我的解決方案是一個DUD。 這裏是精確的立方體（216px）和代碼。 如何將它推回去???????? 下面是相關的CSS代碼：

#controls, #transparency { 
    text-align:center; 
} 
#controls span { 
    padding-right:2em; 
    cursor:pointer; 
} 

#cubeCarousel { 
-webkit-perspective: 800; 
-moz-perspective: 800px; 
-ms-perspective: 800; 
perspective: 800; 

-webkit-perspective-origin: 50% 100px; 
-moz-perspective-origin: 50% 100px; 
-ms-perspective-origin: 50% 100px; 
perspective-origin: 50% 100px; 

margin:100px auto 20px auto; 
width:216px; 
height:216px; 
} 

#cubeCarousel #cubeSpinner { 
    position: relative; 
    margin: 0 auto; 
    height: 216px; 
    width: 216px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 

    -webkit-transform-origin: 50% 108px 0; 
    -moz-transform-origin: 50% 108px 0; 
    -ms-transform-origin: 50% 108px 0; 
    transform-origin: 50% 108px 0; 

    -webkit-transition:all 1.0s ease-in-out; 
    -moz-transition:all 1.0s ease-in-out; 
    -ms-transition:all 1.0s ease-in-out; 
    transition:all 1.0s ease-in-out; 

} 

#cubeCarousel #Ycube,#cubeCarousel #Zcube { 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 

#cubeCarousel .face { 
position: absolute; 
height: 216px; 
width: 216px; 
padding: 0px; 
background-color:rgba(0,0,0,0.5); 
} 


#cubeSpinner .one { 
-webkit-transform: translateZ(108px); 
-moz-transform: translateZ(108px); 
-ms-transform: translateZ(108px); 
transform: translateZ(108px); 
} 

#cubeSpinner .two { 
-webkit-transform: rotateY(90deg) translateZ(108px); 
-moz-transform: rotateY(90deg) translateZ(108px); 
-ms-transform: rotateY(90deg) translateZ(108px); 
transform: rotateY(90deg) translateZ(108px); 
} 

#cubeSpinner .three { 
-webkit-transform: rotateY(180deg) translateZ(108px); 
-moz-transform: rotateY(180deg) translateZ(108px); 
-ms-transform: rotateY(180deg) translateZ(108px); 
transform: rotateY(180deg) translateZ(108px); 
} 

#cubeSpinner .four { 
-webkit-transform: rotateY(-90deg) translateZ(108px); 
-moz-transform: rotateY(-90deg) translateZ(108px); 
-ms-transform: rotateY(-90deg) translateZ(108px); 
transform: rotateY(-90deg) translateZ(108px); 
} 

看到它在行動 - > http://jsfiddle.net/K99GS/5/