翻转div需要添加前后图片
Need to add front and back images to flipping divs
所以我已经为这组代码苦苦挣扎了一段时间,我已经快要完成了。
第一个问题是让我的图像响应高度和宽度,但经过一些讨论后,我能够弄清楚如何通过简化代码和使用颜色作为占位符来使其响应,但现在我无法弄清楚如何重新添加背景图片。
这是 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,但仍然无法正常工作。
非常感谢任何帮助或建议。
您需要前后分类的 div。您可以使用伪选择器定位每个的 front/back。
<div class="flip-container">
<div class="flipper">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
背景尺寸覆盖,然后每个 front/back 的图像。
.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);
}
所以我已经为这组代码苦苦挣扎了一段时间,我已经快要完成了。
第一个问题是让我的图像响应高度和宽度,但经过一些讨论后,我能够弄清楚如何通过简化代码和使用颜色作为占位符来使其响应,但现在我无法弄清楚如何重新添加背景图片。
这是 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,但仍然无法正常工作。
非常感谢任何帮助或建议。
您需要前后分类的 div。您可以使用伪选择器定位每个的 front/back。
<div class="flip-container">
<div class="flipper">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
背景尺寸覆盖,然后每个 front/back 的图像。
.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);
}