翻转菜单始终保持水平居中（当我打开或关闭时）

Question

我的代码：

var currentPage = 0;
$('.book')
.on('click', '.active', nextPage)
.on('click', '.flipped', prevPage);
$('.book').hammer().on("swipeleft", nextPage);
$('.book').hammer().on("swiperight", prevPage);

function prevPage() {
  $('.flipped')
    .last()
    .removeClass('flipped')
    .addClass('active')
    .siblings('.page')
    .removeClass('active')
  $('.scene')
    .addClass('right-set').css("left", "0px");
}

function nextPage() {
  $('.active')
    .removeClass('active')
    .addClass('flipped')
    .next('.page')
    .addClass('active')
    .siblings()
  $('.scene')
    .addClass('left-set').css("left", "490px");
}

.scene {
  width: 500px;
  height: 500px;
  margin: auto;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  -webkit-transition: 1.5s -webkit-transform;
  transition: 1.5s transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transform-origin: left center;  
  -ms-transform-origin: left center;  
  transform-origin: left center;
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.page.active {
  z-index: 1;
}
.page.flipped {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class-col-md-12>
  <div class="scene" id="scene">
    <article class="book">
    <section class="page active">
      <div class="front">
        <img src="http://placehold.it/500x500.png">
      </div>
      <div class="back">
     <img src="http://placehold.it/500x500.png">
      </div>    
    </section>
    <section class="page">
      <div class="front">
        <img src="http://placehold.it/500x500.png">
      </div>
      <div class="back">
        <img src="http://placehold.it/500x500.png">
      </div>    
    </section>
    <section class="page">
      <div class="front">
        <img src="http://placehold.it/500x500.png">
      </div>
      <div class="back">
       <img src="http://placehold.it/500x500.png">
      </div>    
    </section>
    <section class="page">
      <div class="front">
       <img src="http://placehold.it/500x500.png">
      </div>
      <div class="back">
        <img src="http://placehold.it/500x500.png">
      </div>    
    </section>
    <section class="page">
      <div class="front">
       <img src="http://placehold.it/500x500.png">
      </div>
      <div class="back">
       <img src="http://placehold.it/500x500.png">
      </div>    
    </section>
    <section class="page right-set">
      <div class="front">
       <img src="http://placehold.it/500x500.png">
      </div>
      <div class="back">
       <img src="http://placehold.it/500x500.png">
      </div>
    </section>
    </article>
  </div>
</div>

当我们点击单张图片时，它会打开并显示双重图像。

当有双图像时，整个块应该是中心，而在单个图像上，它也将在水平方向上居中。

这是flip menu，可以点击。

打开和关闭此菜单是否可以居中？

Answer 1

像这样更新你的JS函数

function prevPage() {
$('.flipped')
    .last()
    .removeClass('flipped')
    .addClass('active')
    .siblings('.page')
    .removeClass('active')
$('.scene')
    .addClass('right-set').css("left", "0px");

$('#scene').animate({
    'margin-left': '50%'
});

if ($('section.page:nth-child(1)').hasClass('active') == true) {
    $('#scene').animate({
        'left': '0px',
        'margin-left': '35%'
    });
}


}

function nextPage() {
    $('.active')
        .removeClass('active')
        .addClass('flipped')
        .next('.page')
        .addClass('active')
        .siblings()
    $('.scene')
        .addClass('left-set').css("left", "490px");

$('#scene').animate({
    'margin-left': '50%'
});

if ($('.right-set').hasClass('flipped') == true) {
    $('#scene').animate({
        'left': '0px',
        'margin-left': '65%'
    });
}

}