Поверните карту на 180 градусов вдоль оси Y

Question

У меня это в основном работает (см. https://jsfiddle.net/90ycrope/1/), однако содержание во втором div со словом "сзади" видно по всему.

Две цели, которые я пытаюсь достичь:

1. Правильная функция (за контентом виден сзади, фронтальный контент виден спереди)

2. Эффективность - я бы предположил, что код имеет более упрощенный подход?

HTML:

<div class="box_holder">
<div class="front">Some content here</div>
<div class="back">Behind</div>
</div>

JQuery:

$(document).ready(function () {
  $('.box_holder').click(function () {
    $(this).toggleClass('show_info')
  });
});

CSS:

.box_holder {
    display: block;
    position: relative;
    float: left;
    left: 8px;
    top: 8px;
    width: 240px;
    height: 335px;
    text-align: center;
    font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    background: #C3C3C3;
    color: #3b3b3b;
    font-size: 1em;
    line-height: 1.32;
    margin-right: 16px;
    margin-bottom: 32px;
    transition: 1s;
}
.box_holder.show_info {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info .front {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info .back {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.front {
    backface-visibility:hidden;
    transition:1s;
}
.back {
    transition:1s;
}
.show_info .back {
}

Answer 1

Вот минималистичная и исправленная версия анимации сальто. Вот что я сделал:

• Применяется только высота, ширина к контейнеру и добавляется position: relative к этому.
• Передний и задний элементы расположены абсолютно по отношению к контейнеру box_holder, а цвет, цвет фона применяется к этим дочерним элементам.
• backface-visibility дочерних элементов установлены на скрытые. Это ключевое свойство, так как оно предотвращает появление задней части элемента.
• Первоначально передний элемент не вращается, но задний элемент поворачивается по оси Y на 180 градусов. Это отсылает задний элемент позади, и это становится скрытым из-за настройки, упомянутой выше.
• Если щелкнуть элемент и применить класс show_info, поворот на заднем элементе обнуляется (поворачивается назад на 0 градусов), а фронт поворачивается в обратном направлении на 180 градусов. Эти два вместе создают впечатление, будто контейнер переворачивается.

$(document).ready(function() {
  $('.box_holder').click(function() {
    $(this).toggleClass('show_info')
  });
});

.box_holder {
  position: relative;
  width: 240px;
  height: 335px;
}
.box_holder .front, .box_holder .back {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  text-align: center;
  background: #C3C3C3;
  color: #3b3b3b;
  transition: 1s;
  backface-visibility: hidden;
}
.box_holder .back {
  transform: rotateY(180deg);
}
.box_holder.show_info .back {
  transform: rotateY(0deg);
}
.box_holder.show_info .front {
  transform: rotateY(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="box_holder">
  <div class="front">Some content here</div>
  <div class="back">Behind</div>
</div>

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