3D-преобразование, обратное преобразование несимметричное

Question

У меня есть два контейнера, каждый из которых содержит вложенную структуру div, которые имеют 3D-преобразования, применяемые к ним. Эффект состоит в том, чтобы имитировать кусок бумаги, развернутый по центральной линии.

Вы видите текущее состояние кода in this JSFiddle.

Проблема, с которой я столкнулся, заключается в попытке изменить направление вращения справа налево.

Я достиг того, что у меня уже есть, разместив каждый начальный сегмент с помощью translate3d().

Структура HTML выглядит следующим образом.

<div class="container"> 
    <div class="left"> 
     <div class="slice s1"> 
      <div class="slice s2"></div> 
     </div> 
    </div> 

    <div class="right"> 
     <div class="slice s1"> 
      <div class="slice s2"></div> 
     </div> 
    </div> 
</div> 

В .left и .right элементы расположены абсолютно в пределах .container и установите left:50% центрировать их. Первый элемент .left затем получает отрицательный left:-100px, чтобы правильно позиционировать его.

.container { 
    position:absolute; 
    margin-left:-200px; 
    left:50%; 
} 

.left, .right { 
    width: 200px; 
    -webkit-perspective: 500px; 
    -moz-perspective: 500px; 
    perspective: 500px; 
    position: absolute; 
} 

.left { 
    left: -100px; 
} 

.right { 
    left:0; 
} 

The transform3d() затем помещает каждый сегмент либо 99px вправо или 99px влево в зависимости от их емкости.

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

3D-самолеты не так, как показано в этой инспекции в Chrome:

Может кто-нибудь помочь вести меня, чтобы сделать это симметричным?

Answer 1

2 стороны симметричны, это ваша точка зрения, которой нет.

Try:

.right { 
    left:0; 
    -webkit-perspective-origin: 0px 150px; 
    perspective-origin: 0px 150px; 
} 

И будет решить.

Еще лучше, чтобы левая и правая стороны имели размер, который вы видите (они больше справа).

Это сделало бы точку в перспективе по умолчанию (центр в центре) будет также симметричная, и не нужно было бы установить его в произвольное значение