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转换图像

回答

相关问题