Эффект переворачивания CSS, Chrome проблематичен - PullRequest
Новая
       59

Эффект переворачивания CSS, Chrome проблематичен

1 голос
/ 09 ноября 2019

Я работал над эффектом 3D Flip Book (эффект псевдонима) в Firefox.

Затем я протестировал его в Chrome ( Версия 78.0.3904.97 (Официальная сборка) (64)-bit), macOS Mojave ), и он не работает должным образом: в начале задняя обложка книги находится на переднем плане. Затем остальная часть анимации (transition) запускается как ожидалось (см. Firefox).

Я думал, что могу исправить это в Chrome, установив backface-visibility: hidden. Я попробовал несколько вещей, но ничего не помогло.

DEMO : https://jsbin.com/yekovimuku

HTML: 

<div class="book">
  <div class="book-wrapper">
    <img class="book-cover-front" src="...">
    <img class="book-spine" src="...">
    <img class="book-cover-back" src="...">
  </div>
</div>

CSS: 

.book {
  /* just assumed a random container size */
  width: 399px;
  height: 571px;

  -webkit-perspective: 2636px;
  perspective: 2636px;
}
.book-wrapper {
  width: 100%;
  height: 100%;

  position: relative;

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  transition: transform ease-out 2.6s;
}
.book:hover .book-wrapper {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.book-cover-front, .book-cover-back, .book-spine {
  position: absolute;
  left: 0;
  top: 0;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.book-cover-front, .book-cover-back {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: 100%;
}
.book-cover-back {
  -webkit-transform: rotateY(180deg) translateZ(30px);
  -ms-transform: rotateY(180deg) translateZ(30px);
  transform: rotateY(180deg) translateZ(30px);
}
.book-spine {
  max-width: 100%;
  width: 30px;
  height: 100%;
  max-height: 100%;

  -webkit-transform: rotateY(-80deg) translateX(-15px);
  -ms-transform: rotateY(-80deg) translateX(-15px);
  transform: rotateY(-80deg) translateX(-15px);
}

Одним из способов может быть добавление img.book-cover-back в дополнительное div-container и его вращение, затем обратно (transform: rotateX(180deg)).

Информация: набор width, height, max-width, max-height выглядит как беспорядок, но он хорошо работает в контейнере, и я не думаю, что это является частью проблемы в Chrome.

Пожалуйста, помогите мне заставить это работать и в Chrome.

...