css - -webkit-transform: 回転 - 上部の要素を非表示にします

Question

私が使用-webkit-transform: rotate(40 deg)していて、回転された要素が、回転された要素の上にある要素の一部を隠しているようです (子ではありません)。

ここでは、デモが簡単になるように、コードを使用して jsFiddle を作成しました。

おそらくこれは、回転した要素が他の要素の一部を隠しているためですが、この効果は必要ありません。どうすれば修正できますか？

使っz-indexたけどダメ！

Answer 1

3D 変換を行っています。「回転」ではなく、フィドルに「回転Y」があります。つまり、ボタンの前で平面の一部を移動しています。2 番目のボタンのコードを

$("div.buttonB").click( function() {
    $("div.background").css('-webkit-transform', 'rotateY(-190deg)')
});

この方法では、buttonB をクリックした後、buttonB はクリック可能になりますが、buttonA はクリックできません。ここで -190deg を 190deg に変更すると、逆に機能することがわかります。

3D 変換について詳しく知りたい場合は、このサイトをチェックしてください。

http://thewebrocks.com/demos/3D-css-tester/

ビデオを見て、コントロールで遊んでください。お役に立てれば。