Question

所以我现在一直在努力解决这套代码问题，而且我已经接近完成它了。

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

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

* { 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);
}

需要添加正面和背面图像来翻转div

1 个答案: