0

この質問にどのタイトルを設定すればよいか正確にはわかりません。

3D 変換と背面の可視性: 非表示を使用したいくつかの実験があります。

要素の背面を可視に設定しようとしましたが、それ自体の疑似要素でオーバーレイされました。この 1 つの backface-visibility: hidden:

これはCSSです：

.test { 
    width: 100px;
    height: 100px;
    position: relative;
    left: 30px;
    top: 30px;
    background-color: lightgreen;
    transition: all 2s linear;
    -webkit-transform-style: preserve-3d;
}

.test:after {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, black, transparent);
    -webkit-transform: rotateY( 180deg );
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}


.container:hover .test {
  -webkit-transform: rotateY( 180deg );
}

フィドル

要素が回転し、遷移期間中、背面マスクを通して TEST 文字が後方に表示されます。そして、その効果は消えます。

ここで何が起こっているのか誰でも説明できますか?

編集：

自分が何を欲し、何を手に入れ、何を理解していないのか、はっきりしていません。

疑似要素を要素の裏側のレイヤーとして機能させようとしていました。それが理由です：

  1. 要素には背面が表示されています。
  2. 疑似要素の裏面が非表示になっています
  3. 疑似要素にはアルファがあります。

したがって、正面を見ているときは、通常の要素のみが表示されます。裏側を見ると、疑似要素によって色が変更された要素 (もちろん反転) が表示されます。（正面なので見えます）

さて、私はそれが成功するか失敗するかを期待していましたが、なぜそれが移行中に機能し、移行の最後に機能しなくなるのかを期待していませんでした (そして理解できません)。また、ここで移行されるプロパティは何ですか?

4

1 に答える 1

2

片面にテキストが印刷された 2 枚の紙を想像してみてください。テキスト側が互いに向き合うようにそれらを組み合わせます。回転させてみてください。テキストが表示されませんね。:)

.test:after上.testに向いています ( rotateY( 180deg ))。裏面が隠れているので見えません.test:after。を.test回転 .test:afterさせると、2 ページのように回転します。の背面が隠れていない限り、.testは表示されません.test:after。

お気づきのちらつきは、ある種のレンダリングの問題です。

于 2013-07-08T19:38:30.723 に答える