Question

我试图通过隐藏rotate和backface-visibility.来强制显示div。问题是它闪烁然后在一秒后消失。这种情况发生在Chrome上。在IE11上它根本没有出现......

它在Firefox上运行良好。

编辑：我自己只使用backface-visibilty，因为当我包含它的变种时，它变得更加不稳定和奇怪的行为。

编辑2：z-index似乎也没有帮助。

HTML

<div class="one-third-box" onclick="location.href='#'">
    <div class="overlay"></div>
    <img src="http://www.example.com/image/jpg" />
    <div class="box-description">this is a test description</div>
</div>

CSS

.one-third-box {
    float: left;
    margin-bottom: 2px;
    margin-right: 0.2%;
    width: 33.2%;
    position:relative;
    perspective: 1000;
    cursor:pointer;
}
.one-third-box:hover {
    transform: rotateY(180deg);
    transition: 0.6s;
    transform-style: preserve-3d;
}
.one-third-box:hover img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter:"FlipH";
    position:relative;
    top:-1px;
}
.one-third-box:hover .overlay {
    backface-visibility: hidden;
}
.box-description {
    backface-visibility: hidden;
    background: none repeat scroll 0 0 #2f5d70;
    bottom: 0;
    color: #fff;
    font-size: 18px;
    font-weight: lighter;
    height: 38%;
    padding-left: 10%;
    padding-top: 6%;
    position: absolute;
    transform: rotateY(-180deg);
    width: 100%;
    padding-right: 10%;
}
.overlay {
    position:absolute;
    width:100%;
    height:100%;
    background:url('images/overlay.png');
}
.one-third-box > img {
    width: 100%;
}

Answer 1

我通过改变CSS来实现它...好吧，很多。我假设这是由重叠元素和/或transform-style: preserve-3d;行之间的硬件加速不一致引起的。无论哪种方式，我都创建了一个似乎对我有用的代码片段。我也选择使用CSS动画而不是转换，因为在这种情况下它只是使它更具可读性。

* { margin: 0; padding: 0; } /* Simple CSS reset */

.one-third-box {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 33.2%;
}

.one-third-box > img {
  transform-style: flat;
  width: 100%;
  transform: translate3d(0,0,0); /* Fixes blur from scaling */
}

.box-description {
  position: absolute;
  box-sizing: border-box;
  backface-visibility: hidden;
  background: none repeat scroll 0 0 #2f5d70;
  bottom: 0;
  color: #fff;
  font-size: 18px;
  font-weight: lighter;
  height: 38%;
  padding-left: 10%;
  padding-top: 6%;
  width: 100%;
  padding-right: 10%;
  transform: rotateY(-180deg);
}

/* ---------------------- Hover effects ---------------------- */
.one-third-box:hover > img,
.one-third-box:hover > .box-description {
  -webkit-animation: flip 0.6s;
  animation: flip 0.6s;
  transform: rotateY(0deg);
}

/* flip animation */
@-webkit-keyframes flip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}
@keyframes flip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}

<div class="one-third-box" onclick="location.href='#'">
  <div class="overlay"></div>
  <img src="http://www.surgemedia.ie/portfolio-images/alci-clear.png" />
  <div class="box-description">this is a test description</div>
</div>

CSS转换Chrome和IE上的闪烁

1 个答案: