css 3D 전환 이미지

Question

양면 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; 
} 

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/