Свойство перспективы CSS не работает в Firefox - PullRequest
Новая
       35

Свойство перспективы CSS не работает в Firefox

0 голосов
/ 02 мая 2018

Я пытаюсь составить список обложек книг css. Вот мой HTML: 

<div class="books">
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
</div>

А вот мой самый актуальный css: 

.csstransforms3d  .books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.csstransforms3d  .book {
  position: relative;
  -moz-transform: rotateY(-3deg);
  outline: 1px solid transparent; 
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: -webkit-transform ease-in-out .5s;
  transition: -webkit-transform ease-in-out .5s;
  -o-transition: transform ease-in-out .5s;
  transition: transform ease-in-out .5s;
  transition: transform ease-in-out .5s, -webkit-transform ease-in-out .5s;
}

Это хорошо работает на Chrome, но Firefox показывает неправильную перспективу.

Я понял, что в Firefox перспектива меняется, если я перемещаю один элемент в другую позицию.

Если я создаю разные контейнеры для каждой простой книги, проблема, похоже, исчезает, хотя внешний вид в перспективе отличается от хрома, и я думаю, что это решение действительно плохое: 

<div class="books">
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
</div>
<div class="books">
  <div class="book verde" ><img src="https://about.canva.com/wp-content/uploads/sites/3/2015/01/children_bookcover.png" /></div><br>
</div>

Не стесняйтесь видеть мой полный код здесь: https://jsfiddle.net/fyhh8v73/5/ (просто контейнер) https://jsfiddle.net/rkejgkzy/3/ (контейнер для каждой книги)

...