2013-01-18 56 views
0

如何通過將立方體的角倒圓角來使立方體在外部完美我看到一些額外的空間如何移除立方體外的額外空間。 http://jsfiddle.net/ZrpLT/3/立方體圖像在3D動畫中看起來不太好

<div class="top" style="-webkit-transform: rotateX(90deg) translateZ(75px); z-index: 1000;"><img src="http://www.defie.co/designerImages/thumbnails/inventory.png" width="150" height="150" style="margin-top: 0px;"></div> 


div.melonhtml5_gallery div.cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    -ms-transition: -moz-transform 1s; 

}

+0

請減少測試用例,不要將整個頁面的代碼放入jsFiddle HTML面板。 CSS和JavaScript面板出於某種原因。我試圖提供幫助,但是在我能從哪裏停用動畫之前,我的CPU變得瘋狂了。 – Ana

+0

感謝您的回覆...更新了我的小提琴....你能告訴如何解決它.... http://jsfiddle.net/ZrpLT/33/ –

回答

0

做出更好的擬合圖像。這似乎是你可以用一個鋒利的立方體做的所有事情 - 你可以(現在)用CSS旋轉實現的唯一一種。

而且 - 你的最後一個立方體不會轉動:http://jsfiddle.net/ZrpLT/25/

誰知道爲什麼,因爲MelonHTML5 3D立方畫廊是一個商業產品,它似乎並沒有有免費提供的文檔。

配售<div data-caption="void" data-image="" style="display:none"></div>後最後一個箱子似乎沒有做任何事情。如果你省略了style="display:none",那麼 - 雖然最後一個立方體現在旋轉 - 它會留下一個帶陰影的另一個醜陋隱形盒子。

+0

感謝您的回覆....你能告訴我我應該問什麼樣的形象來問設計師 –

相關問題