backface-visibility работает только частично

Question

Я пытаюсь сделать карту, которая щелкает при наведении.Чтобы скрыть заднюю часть карты, я использую backface-visibility: hidden.Но он скрывает только фон задней части, в то время как все элементы все еще видны на лицевой стороне в повернутом варианте.Я использую Google Chrome.

Вот мой HTML-код

<div class="card">

    <div class="card__side card__side--front">
      <div class="card__picture card__picture--1"></div>
      <div class="card__heading">
        <span class="card__heading-span card__heading-span--1">
          The sea explorer
        </span>
      </div>
      <div class="card__details">
        <ul class="card__list">
          <li class="card__item">3 day tour</li>
          <li class="card__item">Up to 30 people</li>
          <li class="card__item">2 tour guides</li>
          <li class="card__item">Sleep in cozy hotels</li>
          <li class="card__item">Difficulty: easy</li>
        </ul>
      </div>
    </div>

    <div class="card__side card__side--back card__side--back-1">
      <div class="card__cta">
        <div class="card__price-box">
          <p class="card__price--only">Only</p>
          <p class="card__price--value">$297</p>
        </div>
        <a href="#popup" class="btn btn--white">Book now</a>
      </div>
    </div>

  </div>

А вот и мой код SASS

.card {
position: relative;
height: 52rem;

perspective: 150rem;

&__side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52rem;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .15);

  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .8s ease;

  &--front {
    background-color: $color-white;
  }

  &--back {
    transform: rotateY(180deg);

    &-1 {
      background-image:
          linear-gradient(to right bottom,$color-secondary-light,$color-secondary-dark);
    }
    &-2 {}
    &-3 {}

  }
}

&:hover &__side--front {
  transform: rotateY(-180deg);
}

&:hover &__side--back {
  transform: rotateY(0);
}

// Front side styles

&__picture {

  &--1 {}
  &--2 {}
  &--3 {}
}

&__heading {

}

&__heading-span {

  &--1 {}
  &--2 {}
  &--3 {}
}

&__details {

}

&__list {
  width: 80%;
  margin: 0 auto;

  list-style-type: none;
}

&__item {

  &:not(:last-child) {
    border-bottom: 1px solid $color-gray-light-2;
  }
}

//Back side styles

&__cta {
  @include absoluteCenter();
  width: 90%;

  text-align: center;
}

&__price-box {
  margin-bottom: 6rem;
  color: $color-black;
  text-align: center;
}

&__price--only {
  font-size: 1.4rem;
  text-transform: uppercase;
}

&__price--value {
  font-size: 6rem;
  font-weight: 300;
}
}

Вот как на самом деле выглядит проблема в Chrome.

Answer 1

Добавление стиля transform: preserve-3d в .card вместо .card__side исправило ошибку для меня.