css - 复合透视与 CSS 3d 转换

Question

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

设置看板的视角很简单:

<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;
}

很简单:

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

但看起来，蓝灰色的 div 粘在了原始旋转的平面上。随着翻转的发生，顶部永远不会变大。如果我给它们任何类型的默认旋转，它们似乎不会从平面中出来并坐直:

这是 live example .

我是 CSS 3D 转换的新手，我想这是一件简单的事情。我想基本上我想要的是级联旋转？非常感谢。

Answer 1

Fiddle/

所以基本上你需要的是一个透视中的透视。
它可以完成，但它不会给出逼真的外观。我在上面的 fiddle 中所做的是:
改为将子元素设置为兄弟元素

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

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