使用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/

所以基本上你需要的是透视视角。
它可以完成，但它没有给出真实的外观。 我在上面的小提琴做的是：
将子元素设置为兄弟姐妹

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

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

Answer 2

试试这个：

.card-container .card.flipped {
  transform: rotateX(180deg);
  transform-origin:top
 }

我建议您尝试设置卡片边框，因为它可能会更好。