css 3D-переходное изображение

Question

Я пытаюсь создать двухстороннюю 3D-ссылку, у меня есть флип-работа и одна сторона красная и одна сторона синяя, но я хочу поместить изображения с обеих сторон не только цвета. При использовании значения «background-image» в моем 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; 
} 

Answer 1

, если применить изображение в качестве фона, кажется, работает нормально.

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

Пример: http://jsfiddle.net/c0qxs827/2/