Question

我正在使用CSS3动画在悬停时打开门元素。如果你看一下下面的网址：http://www.superfreebingo.com/advent-lp/

当您将鼠标悬停在某个框上时，css动画将开始向您显示下方的内容。

我想修改打开的门的“底面”，你会注意到你刚看到前面的图像反过来..

是否会对背景图像本身的另一个动画进行计时以与门“翻转”的点重合？

Answer 1

所以你要找的是backface-visibilty。将其设置为.box img。

现在在该图片中添加元素，在这里我添加了pseudo-element，将其定位为z-index: -1;。

您也可以将div或image设为.box的孩子，也可以。

＆＃13;

/* CSS needed for your affect */

.box img {
  backface-visibility: hidden;
}
.box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #FF0;
  z-index: -1;
}

/* Rest of the markup */

article {
  display: inline-block;
  width: 6em;
  height: 6em;
  margin: .5em;
  perspective: 850px;
}
article:hover .box {
  transition: .5s ease-in;
  transform: rotateY(-97deg);
  transform-origin: 0 50%;
  perspective-origin: 0;
}
.box {
  position: relative;
  transition: all .3s;
  transform-origin: 0 50%;
  text-align: center;
  background-size: cover;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15);
  transform-style: preserve-3d;
  perspective: 850px;
  cursor: pointer;
}
.box, .present {
  width: 100%;
  height: 100%;
}
.box img, .present img {
  width: 100%;
  height: 100%;
}
.present {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15), inset 0 0 30px 20px rgba(0, 0, 0, .4);
}
.present a {
  display: block;
  width: 100%;
  height: 100%;
}

＆＃13;

<article>
  <div class="box">
     <img src="http://i.stack.imgur.com/wheDD.jpg">
  </div>
  <div class="present">
    <a href="#">
      <img src="http://i.stack.imgur.com/EXU8x.jpg">
    </a>
  </div>
</article>

＆＃13;

CSS3动画 - 更改动画元素“底部”的图像

1 个答案: