我尝试仅通过 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>
最佳答案
您需要为所有内容添加 -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);
}
注意:我弄乱了其中一种样式,现在已修复。
关于html - 翻转效果适用于 firefox 但不适用于 chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21096196/