6

CSS 3D 変換を使用してフリップ カードとして機能するいくつかのリスト アイテムを含む順序付けられていないリストがあります。リスト項目内のリンク/アンカー要素をクリックしてフリップさせたいのですが、これらのリンクもリスト項目全体を埋めます。

リスト項目は、デフォルトの非反転状態では見た目も動作も問題ありませんが、1 つをクリックして反転すると、裏側のクリック可能なリンク領域がリスト項目の上半分にしか表示されません。Chrome で調べると、リンク領域がまだリスト項目の高さ全体を占めているため、何が起こっているのかわかりません。

フィドル: http://jsfiddle.net/chucknelson/B8aaR/

以下は、さまざまな要素で使用している変換プロパティの概要です (詳細については、フィドルを参照してください)。

-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);

Windows の Chrome 28 でテストしていることに注意してください。フィドルで -webkit プレフィックス項目を使用しているだけです。また、ごちゃごちゃした CSS やマークアップについてもお詫び申し上げます。この問題を少し繰り返しました。何が起こっているのかを理解するための助けがあれば大歓迎です!

2013 年 8 月 11 日更新:
リスト アイテムの 2D 変換で同じ問題が発生していました (アイテムを反転するだけで、前面/背面はありません)。タグの CSS に @thirtydot の translateZ(1px) 変換を追加すると、<a>それも修正されました。そのため、問題は z 軸に関連しているように見えますが、リンクの一部のみです。多分これはブラウザのバグですか？

4

1 に答える 1

6

この問題は Webkit のレンダリング バグの結果である可能性がありますが、解決策はリンクの Z 軸を 1px だけ変換することでした。これにより、リンク レイヤーが押し上げられ、完全にクリック可能になるように見えました。

3D 変換を修正するには (@thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/のフィドルを使用)、いくつかの JavaScript が必要でした:

    setTimeout(function() {
        flipTarget.find('div.back a').css('-webkit-transform', 'translateZ(1px)');
        flipTarget.find('div.back a').css('transform', 'translateZ(1px)');
    }, 600);

2D 変換を使用する場合、CSS クラスに translateZ を追加すると、次のように機能しました。

.flipped {
    border-top: 1px solid black;
    background-color: #555;

    -webkit-transform: rotateX(180deg);
}

.flipped a {
    color: #eee;
    text-decoration: line-through;

    -webkit-transform: scaleY(-1) translateZ(1px); /* the fix */
}
于 2013-08-16T23:55:05.597 に答える