css - 具有 CSS 3d 转换的复合透视图

我正在尝试使用 3d CSS 构建一个简单的游戏，其结构类似于 Stratego，或者任何其他带有折叠的直立卡片的游戏:

设置电路板的视 Angular 很容易:

<div id="table">
  <div id="board"></div>
</div>

使用 CSS:

#table {
  perspective: 1000px;
  perspective-origin: 50% 50px;
  margin: 0 auto;
  width: 500px;
  height: 500px;
}

#board {
  transform: rotateX(50deg);
  background-color: pink;
  width: 500px;
  padding: 10px;
}

足够简单:

然后我添加了一堆代表这些碎片的 div，使用 this handy tutorial 作为指导。如果您单击其中一个 div，它会向下翻转。

但是蓝灰色的 div 被粘在了原来旋转的平面上，它出现了。当翻转发生时，顶部永远不会变大。如果我给他们任何形式的默认旋转，他们似乎不会从飞机上出来并坐直:

这是 live example 。

我是 CSS 3D 转换的新手，我怀疑这是一个简单的问题。基本上我想要的是级联旋转，我想？非常感谢。

最佳答案

Fiddle/

所以基本上你需要的是透视中的透视。
它可以完成，但它并没有给出现实的外观。
我在上面的 fiddle 中所做的是:
将子元素设置为兄弟元素而不是

<div class="board"></div>
<div class="card">
    <figure class="front"></figure>
    <figure class="back"></figure>
</div>

这是你可以分别对他们两个的看法。
为了避免设置双重透视，您可以简单地添加一个父 div 并在那里设置透视，因为它将在子元素中保持透视。

关于css - 具有 CSS 3d 转换的复合透视图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28226121/