CSS转换翻转效果,Chrome出现问题

问题描述 投票:1回答:2

我一直在Firefox中研究3D翻书效果(别名翻卡效果)。

然后,我在Chrome浏览器中进行了测试(版本78.0.3904.97(正式版本)(64位),macOS Mojave),但未按预期运行:最初,封底是前景。然后,其余动画(transition)将按预期运行(请参阅Firefox)。

我以为可以通过设置backface-visibility: hidden在Chrome中解决此问题。我尝试了几件事,但没有任何效果。

DEMOhttps://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))。

信息:集合widthheightmax-widthmax-height看起来很烂,但在容器中效果很好,我认为这不是Chrome问题的一部分。

[也请帮助我在Chrome浏览器中使用它。

html css google-chrome css-transforms
2个回答

0
投票

我下面的代码段中,我将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>
© www.soinside.com 2019 - 2024. All rights reserved.