html - 带有无序列表的 CSS3 Cube

Question

我见过许多使用 div 的 CSS3 Cube，想用无序列表创建相同的。

我设法在这里创建了立方体http://codepen.io/iakshay/full/2/10。但是我在面孔之间得到了一些额外的边距。

无法弄清楚出了什么问题。

Answer 1

你用过：

-webkit-transform: rotateX([X]deg) translateZ(200px);

当你只使用100px 我猜它应该可以工作，如下所示：

-webkit-transform: rotateX([X]deg) translateZ(100px);

编辑

基本上你必须使用一半的宽度，因为rotateXYZ在中间的一点旋转元素。完成后，您已经完成了一半，只需添加“其余部分”。

这是一个很好的例子，可以看到鼠标悬停时的这种效果：

http://css3.bradshawenterprises.com/flip/

Answer 2

你的 -webkit-transform: translateZ(200px); 需要：-webkit-transform: translateZ(100px); 在每一侧。我第一次经历这个也花了我一段时间:-)