Question

我正在尝试创建一个双面3D链接，我有翻转工作，一边是红色，一边是蓝色，但我想把图像放在两边，而不仅仅是颜色。在我的css中使用“background-image”值时，没有图像显示，有人可以帮忙。

这是我的代码：

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

css 3D过渡图像

1 个答案: