具有 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

试试这个：

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

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

Answer 2

Fiddle/

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

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

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

具有 CSS 3d 变换的复合视角

Compound perspectives with CSS 3d transformations

css

3d

css-transitions

css-transforms