問題は何ですか
IE、Firefox、Chrome、および Opera でこのパースペクティブの使用シナリオ (必要なすべての CSS ブラウザー タグとオプションの CSS ブラウザー タグを含む w3C 検証済み Web ページ) をテストしたところ、異なる (すべて不正確な) 結果が見つかりました。これまでのところ、Web ブラウザーはすべて、表示がわずかに異なるパースペクティブを実装しているようです。この質問は、私が何か不足しているかどうかを確認するためにここにあり、クロスブラウザソリューションが利用可能です.
誰も解決策を持っていない場合は、興味深い状況です。これまで、すべてのブラウザー間で著しく、取り返しのつかないほど不正確に動作する CSS の機能を見たことがありません。
私が間違っていることを願っています。そうで ない場合は、php または javascript ブラウザー チェックを介して 3 つの個別のスタイル シートを作成および維持する必要があります。現在、ブラウザーではなく Modernizr を使用して機能をチェックすることを好みますが、この状況では、そのソリューションは実行不可能であることが証明されます。
状況例:
Chrome では、電話で特定のホーム オートメーション アプリを使用してバックグラウンドでテレビのチャンネルを制御することをシミュレートする iPhone インターフェイスを配置しました (実際のビデオ)。遠近法と変形を伴う画像。
ただし、これを Firefox から見ると、以下に示すように要素が完全にずれています。
質問：
ブラウザごとに個別のスタイル シートを使用せずにこの結果を生成できるクロス ブラウザ ソリューションはありますか?
ライブ JS フィドル:
目的：
私はテクノロジー企業の Web サイトを開発しています。提供される主なサービスの 1 つはホーム オートメーションです。リモコン、または iPhone または iPad を使用して、家の照明、音楽、テレビなどを制御できます。非常にクールです。そこで、これをシミュレートするホーム オートメーション ページのセクションを作成することにしました。
Chrome では、現在次のように表示されます。
Firefox の場合:
ノート：
iPhone の画面は、実際には別の要素であり、ホバーするとオンになり、10 秒間点灯したままになります。部屋のさまざまな照明、スピーカー、テレビを制御するインターフェイスをiPhoneで設計しています。これは実際には別のdivであり、iPhoneでも制御してチャンネルを変更できます。
背景は Blender でレンダリングした画像で、照明の変化に合わせてさまざまなバージョンをレンダリングできます。
CSS:
.home-auto-interactive {
width: 1250px;
height: 700px;
background-color: gray;
background-image: url('http://www.testing.agcomputers.net/style/images/Room_1.jpg');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
-webkit-perspective: 80;
margin-left: auto;
margin-right: auto;
}
.home-auto-wrap {
width: 100%;
background-color: #252525;
}
.tv-screen {
width: 8.12%;
height: 7.8%;
position: absolute;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
-ms-transition: -ms-transform .5s;
transition: transform .5s;
-webkit-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-moz-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-o-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-ms-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
}
.iphone-screen {
width: 22.7%;
background-color: black;
background-image: url('http://www.testing.agcomputers.net/style/images/iphone_screen_test.jpg');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
height: 50.8%;
bottom: 12.7%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
-webkit-transition-delay: 10s !important;
-moz-transition-delay: 10s !important;
-o-transition-delay: 10s !important;
-ms-transition-delay: 10s !important;
transition-delay: 10s !important;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-moz-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-o-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-ms-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
}
.iphone-screen:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-o-transition-delay: 0s !important;
-ms-transition-delay: 0s !important;
transition-delay: 0s !important;
}
HTML:
<div class="home-auto-wrap">
<div class="home-auto-interactive"><!-- begin home auto interactive :: this has the purpose of displaying an interactive home automation area -->
<div class="tv-screen"><!-- begin tv screen -->
<iframe width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div><!-- end tv screen -->
<div class="iphone-screen"><!-- begin iphone screen -->
</div><!-- end iphone screen -->
</div><!-- end home auto interactive -->
</div>