如何删除它们之间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