Compound perspectives with CSS 3d transformations

Question

I'm trying to build a simple game with 3d CSS whose structure resembles Stratego, or any other game with upright cards that get toppled:

Setting the perspective of the board is easy:

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

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

Easy enough:

Then I added a bunch of divs representing the pieces, using this handy tutorial as a guide. If you click one of the divs, it flips down.

But the blue-and-gray divs are stuck to the plane of the original rotation, it appears. The top never gets larger as the flip occurs. If I give them any sort of default rotation, they don't appear to come out of the plane and sit upright:

Here's the live example.

I'm new to CSS 3D transforms, and I suspect this is a simple matter. Essentially what I want is cascading rotations, I think? Thanks much.

Answer 1

Fiddle/

So basically what you needed was perspective in a perspective.
It can be done but it does not give a realistic look. What i have done in the fiddle above is:
Set the child elements to be siblings instead

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

This was you can se your perspective to both of them separately.
To avoid setting double perspective you can simply add a parent div and set the perspective there since it will maintain perspective in child elements.