2

Chrome 24に奇妙なバグがあります。長い説明よりも、こちらをご覧ください。

.card {
  width:270px;
  height:180px;
  background:lightblue;
  border:1px solid black;
}

.card:hover {
  -webkit-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  -moz-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  -ms-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  -o-transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
  transform:perspective(2000) rotate3d(0, 40, 0, 20deg);
}

http://jsfiddle.net/xMfZw/3/

左側でわかるように、問題なくホバリングできますが、右側では、divをホバリングしなくなったため、ちらつきます。

何かアドバイス？

IE10、Firefoxでは正常に動作していますが、Operaでは動作していません。

4

1 に答える 1

4

何が起こるかというと、それを回転させると、右半分が元の平面の後ろに移動するため、ホバーが機能しなくなります。全体を要素の幅の半分だけ前方に移動すると（さらに小さくても機能しますが、半分は垂直軸を中心に90度回転した場合に使用されます）、問題は解決します。

-webkit-transform: translateZ(135px) perspective(2000) rotate3d(0, 40, 0, 20deg);

働くフィドル

また、あなたは必要ありません-ms-transform。IE10はプレフィックスなしの変換をサポートし、IE9は3D変換をサポートしません。

Operaは3D変換をまったくサポートしていません。したがって、どちらも必要ありません-o-transform。

に関しては-moz-transform、現在、FirefoxforAndroidでのみ必要です。

caniuse.comを参照してください

于 2013-01-18T00:23:56.193 に答える