css 3D过渡图像

我正在尝试创建一个双面3D链接，我有翻转工作，有一面红色和一面蓝色，但我想把图像放在任何一边，而不仅仅是颜色。当在我的css中使用“背景图像”值时，没有图像出现，请有人帮忙

这是我的密码：

   .flip3D > .front{
   position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 0deg );
   background:#e51c1c; width:246.5px; height:164px; border-radius: 0px;
   backface-visibility: hidden;
   transition: transform .5s linear 0s;
 }  

   .flip3D > .back{
   position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 180deg );
   background:#428bca; width:246.5px; height:164px; border-radius: 0px;
   backface-visibility: hidden;
   transition: transform .5s linear 0s;
 }

---

如果你把一个图像应用到一个背景上，它似乎工作得很好

 .flip3D > .front{
   position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 0deg );
   background: url(...) no-repeat; width:246.5px; height:164px; border-radius: 0px;
   backface-visibility: hidden;
   transition: transform .5s linear 0s;
 }  

 .flip3D > .back{
   position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 180deg );
   background: url(...) no-repeat; width:246.5px; height:164px; border-radius: 0px;
   backface-visibility: hidden;
   transition: transform .5s linear 0s;
 }

---

例如：

请提供不起作用的JSFIDLE，我想这就是它！，谢谢。