CSS3 动画 - 更改动画元素 'underside' 上的图像

Question

我正在使用 CSS3 动画让门元素在悬停时打开。如果您查看以下网址:http://www.superfreebingo.com/advent-lp/

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

我想修改打开的门的“底面”，您会注意到，此时您只看到相反的正面图像。

是否会在背景图像本身上安排另一个动画以与门“翻转”的点重合？

Answer 1

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

现在在该图像下方添加一个元素，这里我只是添加了一个伪元素，用z-index: -1; 绝对定位它；.

您也可以将 div 或 image 设置为 .box 的子级，同样有效。

/* 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%;
}

<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>