0

因此，我一直在为这组代码苦苦挣扎一段时间，而我已经快要完成它了。

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

这是 OG 代码笔，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，但仍然无法使其正常工作。

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

4

1 回答 1

1

密码笔

你需要前端和后端分类的 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);
}
于 2015-10-06T18:32:55.240 回答