带有无序列表的CSS3多维数据集

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）;在每一边。我第一次遇到这个时也花了一些时间： - ）