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

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