1

CSS で変換を適用する div があります。実際の変換は次のとおりです。

.trans{
  transform-origin: right center;
  transform: perspective( 600px ) rotateY( -30deg) translateZ(1px);
  -webkit-transform-origin: right center;
  -webkit-transform: perspective( 600px ) rotateY( -30deg) translateZ(150px);
}

私が見つけた限りの問題は、これがdivをページの「後ろ」で深く回転させることです。正しく表示されますが、マウスと正しくやり取りしていないようです。したがって、ホバー状態の CSS クラスは、これらの要素ではまったく機能しません。

縮小されたテストケースを確認できます。結果ペインで、左側の四角は背景色を正しく変更していませんが、右側の四角は変更していることに注意してください。このバグは Chrome で発生しますが、テストしたところ Firefox や IE では発生しませんでした。

これを修正する方法について何か良いアイデアはありますか?

4

1 に答える 1

5

displayクラスが機能するには、クラスのプロパティを宣言する必要があります.trans。それでおしまい。

これが実用的なソリューションです。

HTML:

<div class="square trans">
    <p>Text Here!</p>
</div>
<div class="square">
    <p>Text Here!</p>
</div>

CSS:

.square{
    background-color: #ffffff;
    border-radius: 4px;
    border-color: #222222;
    border width: 6px;
    border-style: dotted;
    display:inline-block;
    float:left;
}

.trans{
    transform-origin: right center;
    transform: perspective( 600px ) rotateY( -30deg);
    -webkit-transform-origin: right center;
    -webkit-transform: perspective( 600px ) rotateY( -30deg);
    display:table-cell;

}

/* Doesn't work on transformed square! */
.square:hover{
     background-color: #ff0000;
}

お役に立てれば。

于 2013-05-24T05:25:15.887 に答える