如何刪除它們之間rotateX

Question

這樣的演示行：

http://codepen.io/anon/pen/sorAB

我怎樣才能去除塊之間的白線時，他們rotateX。

也許它可以沒有翻譯/保證金/頂級屬性。

英語不好。 XD

Answer 1

您可以添加邊框周圍的塊： http://codepen.io/anon/pen/vndfc

Answer 2

的問題是，它是很難做出格完全匹配。

您的佈局是確切的。然而，尺寸略有縮減會在分隔之間產生差距。

但是，如果你增加尺寸，那麼角落不再匹配。

一個可行的解決方案是在div之間設置陰影。使這個陰影比格略小，所以它不會出現在這次的角度：

#girl{ 
    width:300px;height:400px;margin:100px auto 0; 
    -webkit-perspective:1000; 
    -webkit-perspective-origin: center center; 
} 
#girl .item{ 
    height: 100px;width:100%;background-color:#333; 
    -webkit-transform-origin:top; 
    -webkit-transform-style:preserve-3d; 
    box-shadow: 0px 2px 0px -1px #333; 
} 
#girl .item.i1{-webkit-transform:rotateX(45deg);} 
#girl .item.i2{-webkit-transform:translateY(100px) rotateX(-90deg);} 
#girl .item.i3{-webkit-transform:translateY(100px) rotateX(90deg);} 
#girl .item.i4{-webkit-transform:translateY(100px) rotateX(-90deg);} 

codepen