css 3D轉換圖像

我想創建一個雙面3D鏈接，我有翻轉工作，並有一個側面紅色和一面藍色，但我想把圖像放在任何一邊不只是顏色。在我的CSS中使用「background-image」值時，沒有圖像出現，請有人幫忙。css 3D轉換圖像

這裏是我的代碼：

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

來源

2014-12-07 Martin Hall

請提供不工作 – 2014-12-07 10:26:02

我覺得這是它！感謝的jsfiddle！ http://jsfiddle.net/c0qxs827/ – 2014-12-07 10:33:43

[Works with me with images]（http://jsfiddle.net/chipChocolate/c0qxs827/1/）。 – 2014-12-07 10:38:51

如果你申請的圖像似乎工作得很好的背景。

.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/

來源

2014-12-07 10:39:09

css 3D轉換圖像

回答

相關問題