html - 翻转div需要添加前后图片

Question

所以我现在已经为这组代码苦苦挣扎了一段时间，我非常接近完成它。

第一个问题是让我的图像响应高度和宽度，但经过一些讨论后，我能够弄清楚如何通过简化代码和使用颜色作为占位符来使其响应，但现在我无法弄清楚如何重新- 添加背景图片。

这是 OG codepen，http://codepen.io/anon/pen/YypXjw

现在，http://codepen.io/anon/pen/rOWXzW

* { color: #fff; }

.flip-container {
width: 33.333%;
padding-bottom: 33.333%;
float: left;
}

.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front {
position: absolute;
width: 100%;
padding-bottom: 100%;
}

.front-a {
background: red;
}

.front-b {
background: blue;
}

.front-c {
background: green;
}

我不知道为什么我也无法显示 html。

所以代码已经清理干净了，现在我需要弄清楚的是如何将前后图像添加到翻转的 div 中。

我尝试像 og 代码一样添加前后 div，但仍然无法正常工作。

非常感谢任何帮助或建议。

Answer 1

Codepen

您需要前后分类的 div。您可以使用伪选择器定位每个的正面/背面。

<div class="flip-container">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

背景尺寸覆盖，然后是每个正面/背面的图像。

.front, .back {
  background-size: cover;
}

.flip-container:nth-of-type(1) .front {
  background-image: url(image.jpg);
}

.flip-container:nth-of-type(1) .back {
  background-image: url(image.jpg);
}