5

解決済み- 問題は、回転を行うと要素の半分が Web ページのニュートラル (ゼロ) Z 軸の後ろに配置され、WebKit が明らかにその「ニュートラル」平面を通過するマウス イベントを許可しないことです。そのため、回転ポイントをパネルの右端/左端に変更すると解決しました。奇妙ですが、今のところ機能します。

4 つのパネルを持つ単純な HTML5/CSS3 ページがあります。これらのパネルは、-webkit-transform を使用して適切に配置されています。:hover では、-webkit-transform を使用してパネルを最前面に表示します。コードは以下です。

何が起こるかというと、:hover アクションが信頼できないということです。パネル上でマウスをスワイプすると、パネルの上にカーソルを置いたままマウスの移動を停止するのが一般的ですが、パネルは元の位置のままです。具体的には、左から右にスワイプすると、左端の 2 つのパネルは正常に動作しているように見えますが、右端の 2 つのパネルは、マウスがパネルの半分を横切るまで拡大されません。

これは何が原因でしょうか？

EDIT：簡単なフォローアップ、変換された要素に配置されたリンクは、要素の左端（2つの左パネルの場合）または右端（2つの右パネルの場合）の半分でのみクリック可能になるようです. つまり、クリック ゾーンは要素の「近い」半分に対してのみアクティブになります。

まず、HTML (最小限の例):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
    <article class="tr_left"></article>
    <article class="tr_midleft"></article>
    <article class="tr_midright"></article>
    <article class="tr_right"></article>
</section>
</body>
</html>

そしてCSS：

#test article {
    display: inline-block;
    height: 150px;
    width: 160px;
    background-color: blue;
    -webkit-transition: -webkit-transform 0.2s ease;
}

#test article.tr_left {
    -webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}

#test article.tr_midleft {
    -webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}

#test article.tr_midright {
    -webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}

#test article.tr_right {
    -webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}

#test article:hover, #test article:active {
    -webkit-transform: perspective(400px) scale(1.2);
}
4

2 に答える 2

4

元のパースペクティブを削除してホバーするだけで完璧に機能するため、クロムのバグのようです。

(例http://jsfiddle.net/mMYrf/1/ )

それを機能させるためにできることは、遠近領域を塗りつぶす外側のコンテナを作成し、ホバー時に内側の要素にホバー効果を与えることです。

(例: http://jsfiddle.net/mMYrf/2/ )

ところで素晴らしい効果:)

于 2011-10-14T07:54:41.220 に答える
2

同じ問題が発生しました。要素全体が表示されたまま、リンクの上位50％のみがホバー可能でクリック可能でした。-webkit-transformにtranslateZ（1px）を追加することで、これを修正しました。これにより、要素全体がZ軸の前に表示され、完全にホバリングおよびクリック可能になります。ただし、translateZには1pxのズームがありますが、目立ちません。この問題が処理されるまで、これは行う必要があります！

于 2011-11-01T05:43:42.360 に答える