Составные перспективы с 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 в качестве руководства. Если вы нажмете один из разделов, он перевернется.

Но сине-серые разделители застревают к плоскости первоначального вращения. Верх не увеличивается, когда происходит переворот. Если я дам им какой-либо вращения по умолчанию, они не появляются, чтобы выйти из самолета и сидеть в вертикальном положении:

Вот 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 
} 

Я предлагаю также попробовать установить границу на карту, как это могли бы сделать лучше.