问题是什么
我已经在 IE、Firefox、Chrome 和 Opera 中测试了这种透视使用场景（一个经过 w3C 验证的网页，其中包含所有必要和可选的 CSS 浏览器标签），并发现了不同的（所有不准确的）结果。到目前为止，Web 浏览器似乎都实现了显示略有不同的透视。这个问题在这里是为了看看我是否遗漏了一些东西并且有一个跨浏览器解决方案可用。
如果没有人有解决方案，那么，我们有一个有趣的情况。在此之前，我从未见过 CSS 中的某个功能在所有浏览器之间表现得明显且不可挽回的不准确。
我希望我是错的， 因为如果不是，我必须通过 php 或 javascript 浏览器检查创建和维护三个单独的样式表，这种方法显然已经过时并且在当今的网页设计中不受欢迎。我们现在更喜欢使用 Modernizr 来检查功能而不是浏览器，但这种情况将证明该解决方案是不可行的。
示例情况：
在 Chrome 中，我放置了一个 iPhone 界面，模拟在手机上使用特定的家庭自动化应用程序来控制背景中的电视频道（实际视频），其中电视和 iphone 看起来像是它们的一部分具有透视和变换的图像。
但是，当从 Firefox 中查看时，这些元素完全不合适，如下所示。
问题：
是否有任何跨浏览器解决方案可以让我在不为不同浏览器使用单独样式表的情况下产生此结果？
现场 JS 小提琴：
目的：
我正在为一家科技公司开发一个网站，提供的主要服务之一是家庭自动化。使用遥控器、iPhone 或 iPad，您可以控制家中的灯光、音乐、电视等。非常酷。所以，我决定开发一个模拟这个的家庭自动化页面部分。
在 Chrome 上，它现在看起来像这样：
在火狐上：
笔记：
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>