Question

我试图通过css和html制作翻转效果。在Firefox上工作正常但没有在chrome上工作。我也尝试了webkit前缀但没有工作可以任何人帮助我。紧急。其中代码

  .flip3D{
  width: 240px;
  height: 200px;
  margin: 10 px;
  float: left;
  }
  .flip3D > .front{
  position: absolute;
  -webkit-transform: perspective( 600px ) rotateY( 0deg);
  transform: perspective( 600px ) rotateY( 0deg);
  background-color: #D8D2D2;
  width: 180px;
  height: 200px;
  border-radius: 7px;
  color: black;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transition: -webkit-transform 0.5s ;linear 0s;
  transition: transform 0.5s ;linear 0s;
  }
  .flip3D > .back{
  position: absolute;
  -webkit-transform: perspective( 600px ) rotateY( 180deg);
  transform:perspective( 600px ) rotateY( 180deg);
  background-color:#30D2FF;
  width: 180px;
  height: 200px;
  border-radius: 7px;
  color: white;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transition: -webkit-transform 0.5s ;linear 0s;
  transition: transform 0.5s ;linear 0s;
  }
  .flip3D:hover > .front{
  transform:perspective( 600px ) rotateY( -180deg);
  }
  .flip3D:hover > .back{
  transform:perspective( 600px ) rotateY( 0deg);
  }

html代码：

    <div class="flip3D">
    <div class="back">box 1 back</div>
    <div class="front">box 1 front</div>``
    </div>

Answer 1

您需要为所有内容添加-webkit-前缀。将它添加到下面的代码后，似乎工作正常，

.flip3D:hover > .front{
  transform:perspective( 600px ) rotateY( -180deg);
    -webkit-transform:perspective( 600px ) rotateY( -180deg);
  }
  .flip3D:hover > .back{
  transform:perspective( 600px ) rotateY( 0deg);
    -webkit-transform:perspective( 600px ) rotateY( 0deg);
  }

JSFIDDLE

注意：我弄乱了现在修复的其中一种样式。

Answer 2

这是你的答案人。将-webkit前缀添加到transform属性。对于那些悬停样式，你最后错过了两次。并查看小提琴以供参考。 JS FIDDLE DEMO

.flip3D:hover > .front{
    -webkit-transform:perspective( 600px ) rotateY( -180deg);
}
.flip3D:hover > .back{
    -webkit-transform:perspective( 600px ) rotateY( 0deg);
 }

翻转效果在firefox上工作但不在chrome上

2 个答案: