1

これを表示するには、Linux Chrome が必要です。私の開発サイトであるspoilmebox.com (下部の 3 つのボックスを参照) で、背面が透けて見えます。これを修正するにはどうすればよいですか?

CSS...

.Qcontainer {
position: relative;
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
background: none;
}
.pumpkinhead {
width:100%;
height:15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
-moz-transform-style: preserve-3d;
-moz-transition: 1s;
transform-style: preserve-3d;
transition: 1s;
}
.Qcontainer:hover .pumpkinhead {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5;
}
.back {
width: 66%;
height:127%;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #000000;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65)0%,
rgba(0,0,0,0)100%);
z-index: 4;
padding: 15%;
}

html...

<div class="row-fluid">
            <div class="span4 Qcontainer">
                <div class="pumpkinhead">
                    <div class="face front">
                        <h2 class="g2-unit-header">...</h2>
                        <p style="min-height: 240px;">...</p>
                        <p><a href="#" class="btn btn-info">...</a></p>
                    </div>
                    <div class="face back">
                        <p>this is my back fool!</p>
                    </div>
                </div>
            </div>
</div>

ブートストラップ (span4) を使用していることに注意してください。ただし、Chrome (Windows) と Firefox で動作しているため、これが台無しになっているとは思いません。

このコードのソースは、Ben Frain による HTML5 と CSS3 を使用したレスポンシブ Web デザインです。

このサイトではすでに jQuery と JavaScript を使用しているため、代替手段を探していません。この新しい CSS3 テクノロジーを、ほとんどのブラウザーで動作させることができればサポートしたいと考えています。

4

1 に答える 1

0

私が知る限り、これは Linux 上の Chrome の最近のビルドのバグです (他のプラットフォームではまだテストしていません)。同じ CSS 変換を使用している他のすべてのサイトで、背面が透けて見えるという問題が発生していることに気付くでしょう。私自身のサイトでも、パースペクティブがレンダリングされなくなっていることに気付きました。

煩わしくはありますが、接頭辞付きの CSS 機能はまだ実験的なものであることを覚えておく必要があります。安定性を維持するため、または存在し続けるためにそれらに依存するべきではありません。

于 2013-05-03T15:46:57.647 に答える