过渡的书是不是在火狐和微型边缘工作 - 为什么，我该如何解决它？

Question

在Firefox中，转换和转换似乎不能正常工作，我在-moz-前缀添加了所有内容，但它似乎对于使其更具功能性没有任何影响。我有一本书在盘旋时打开，但在狐狸中，书不会一直打开，并在鼠标离开它之前关闭。书中没有使用的转换和转换似乎正在起作用，它似乎是书中的问题。至于微软的边缘它的工作，但背景图像，在abd之后，abd之后，pududo元素和div我没有出现。书籍封面在微软边缘只是空白。有更多经验的人是否了解这个问题？它在Chrome中工作正常，但不是在Firefox中。

https://jsfiddle.net/ma2u65o0/

//book css snippet 
.book-front{ 
     position: relative; 
     transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     transform-origin: left; 
     -moz-transform-origin: left; 
     transition: transform 1s ease-in-out 0s; 
     -moz-transition: transform 1s ease-in-out 0s; 
     box-shadow: 0px 3px 5px 2px rgba(0,0,0,.5); 
     perspective: 400px; 
     perspective-origin: -200px; 
     } 
.front-of-book-front{ 
     background-image: url("images/mainCover.jpg"); 
     background-repeat: no-repeat; 
     background-size: cover; 
     background-position: 47%; 
     backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     } 

Answer 1

添加backface-visibility:hidden您.front-of-book-front，使后开和关闭操作透明。

另外，我建议你使用3D变换进行硬件加速。

更新后的CSS：

.front-of-book-front, 
.back-of-book-front, 
.book-front, 
.book-back, 
.book{ 
    width: 100px; 
    height: 160px; 
    position: relative; 
    perspective: 800px; 
} 
.book{ 
    margin: 52px auto; 
    transition: transform 1s ease-in-out 0s; 
    } 
.book-front{ 
     position: relative; 
     transform-style: preserve-3d; 
     transform-origin: left; 
     transition: transform 1s ease-in-out 0s; 
     box-shadow: 0px 3px 5px 2px rgba(0,0,0,.5); 
     perspective: 400px; 
     perspective-origin: -200px; 
     } 
.front-of-book-front{ 
    background-image: url("images/mainCover.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 47%; 
     } 
.front-of-book-front:before{ 
    content: "Seraph Chronicles: Evangelion"; 
    text-shadow: 2px 2px 1px rgba(0,0,0,.5); 
    font-size: .5em; 
    line-height: 15px; 
    color: white; 
    width: 119px; 
    height: 15px; 
    background-color: rgba(255,165,0,.5); 
    position: absolute; 
    text-align: center; 
    transform: translate3d(8px,93px,0) rotateZ(90deg); 
} 
.front-of-book-front:after{ 
    content: ""; 
    width: 75px; 
    height: 12px; 
    background-color: rgba(255,165,0,.5); 
    position: absolute; 
    transform: translate3d(0px,19px,0); 
    } 
.bar{ 
    width: 80px; 
    height: 8px; 
    background-color: rgba(0,0,0,.8); 
    font-size: .3em; 
    color: white; 
    text-align: right; 
    transform: rotateZ(90deg) translate3d(36px,-45px,0); 
    } 

.bar p{ 
    padding: 2px 3px 0 0 ; 
    display: block; 
} 
.back-of-book-front{ 
    backface-visibility: hidden; 
    background-color: rgb(240,234,214); 
    transform: rotateY(180deg); 
    position: absolute; 
    top: 0; 
} 
.book:hover .book-front { 
    transform: rotateY(-180deg); 
     } 
.book:hover{ 
    transform: rotateZ(10deg); 
      } 

.book-back{ 
    position: absolute; 
    top:0; 
    background-color: rgb(240,234,214); 
    z-index: -1; 
    box-shadow: 3px 3px 5px 0 rgba(0,0,0,.5); 
    text-align: justify; 
} 

.book-back p{ 
     font-size: .3rem; 
     margin: 2.9em 1.9em; 
} 

@media screen and (min-wdith:400px){ 

    .front-of-book-front, 
    .back-of-book-front, 
    .book-front, 
    .book-back, 
    .book{ 
     width: 113px; 
     height: 180px; 
     } 

    .front-of-book-front:before{ 
     width: 133px; 
     height: 17px; 
     transform: translate3d(8px,105px,0) rotateZ(90deg); 
    } 

    .front-of-book-front:after{ 
     width: 83px; 
     height: 14px; 
     transform: translate3d(0,21px,0); 
    } 
    .bar{ 
     width: 95px; 
     height: 10px; 
     background-color: rgba(0,0,0,.8); 
     font-size: .3em; 
     color: white; 
     text-align: right; 
     transform: rotateZ(90deg) translate3d(42px,-45px,0); 
     } 
    .book-back p{ 
     font-size: .4rem; 
     margin: 2.9em 1.9em; 
    } 
    .book-side{ 
     width: 176px; 
     height: 10px; 
     top:-3px; 
     } 
} 

@media screen and (min-width:860px){ 
    .front-of-book-front, 
    .back-of-book-front, 
    .book-front, 
    .book-back, 
    .book{ 
     width: 200px; 
     height: 320px; 
     } 
    .front-of-book-front{ 
     perspective: 200px; 
    } 
    .front-of-book-front:before{ 
     width: 234px; 
     height: 37px; 
     transform: translate3d(11px,185px,0) rotateZ(90deg); 
     font-size: 1em; 
     line-height: 37px; 
    } 

    .front-of-book-front:after{ 
     width: 146px; 
     height: 26px; 
     transform: translate3d(0,32px,0); 
    } 
    .bar{ 
     width: 172px; 
     height: 23px; 
     background-color: rgba(0,0,0,.8); 
     font-size: .3em; 
     color: white; 
     text-align: right; 
     transform: rotateZ(90deg) translate3d(74px,-82px,0); 
     font-size: .7em; 
     } 
    .bar p{ 
     display: block; 
     padding: 12px 5px 0 0; 
    } 
    .book-side{ 
     width: 312px; 
     height: 10px; 
     top:-1px; 
     left: -5px; 

     } 
    .book-back p{ 
     font-size: .7em; 
     margin: 3.3em 2.3em; 
    } 

}