我试图通过css和html制作翻转效果.在Firefox上工作正常但没有使用chrome.I也尝试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代码:
box 1 backbox 1 front``
Josh Powell.. 5
您需要-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
注意:我弄乱了现在修复的其中一种样式.
您需要-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
注意:我弄乱了现在修复的其中一种样式.