如何删除他们rotateX之间的界限

Question

喜欢这个演示：

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

如何在旋转X时删除块之间的白线。

也许没有translate / margin / top属性。

英语不好。 XD

Answer 1

您可以在块周围添加边框： http://codepen.io/anon/pen/vndfc

Answer 2

问题在于很难使div完全匹配。

你的布局是准确的。但是，维度的轻微舍入会产生div之间的差距。

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

一个可行的解决方案是在div之间设置阴影。并使这个阴影略小于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