我一直在Firefox中研究3D翻书效果(别名翻卡效果)。
然后,我在Chrome浏览器中进行了测试(版本78.0.3904.97(正式版本)(64位),macOS Mojave),但未按预期运行:最初,封底是前景。然后,其余动画(transition
)将按预期运行(请参阅Firefox)。
我以为可以通过设置backface-visibility: hidden
在Chrome中解决此问题。我尝试了几件事,但没有任何效果。
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浏览器中使用它。
我下面的代码段中,我将IMG tag
包裹在DIV tag
内,并且需要在backface-visibility: hidden
类上添加.book-spine
,因为翻转后,然后删除了背面图像上作为book-spine
image
基数的单行显示在右侧,我还添加了前缀以提高浏览器的兼容性。希望下面的摘要对您有所帮助。
*, ::before, ::after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body{margin-top: 3em;}
.book {
margin: 0 auto;
width: 399px;
height: 571px;
-webkit-perspective: 2636px;
-moz-perspective: 2636px;
perspective: 2636px;
}
.book-wrapper {
width: inherit;
height: inherit;
position: relative;
display: block;
-webkit-transition: transform ease-out 2.6s;
-moz-transition: transform ease-out 2.6s;
-o-transition: transform ease-out 2.6s;
transition: transform ease-out 2.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.book:hover .book-wrapper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.book-cover-front, .book-cover-back, .book-spine{
position: absolute;
left: 0;
top: 0;
}
.book-cover-front, .book-cover-back{
height: 100%;
width: 100%;
}
.book-cover-back {
-webkit-transform: rotateY(180deg) translateZ(30px);
-moz-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);
-moz-transform: rotateY(-80deg) translateX(-15px);
transform: rotateY(-80deg) translateX(-15px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.book-wrapper img{
display: block;
width: 100%;
height: 100%;
}
<div class="book">
<div class="book-wrapper">
<div class="book-cover-front"><img src="https://i.imgur.com/L1i9cve.png"></div>
<div class="book-spine"><img src="https://i.imgur.com/wmA6031.png"></div>
<div class="book-cover-back"><img src="https://i.imgur.com/oNfGLOw.png"></div>
</div>
</div>