Cross Browser透视解决方案？

Question

问题是什么

我已经在IE，Firefox，Chrome和Opera中测试了这种透视使用情况（带有所有必需和可选CSS浏览器标签的w3C验证网页），并发现了不同的（所有不准确的）结果。到目前为止，似乎Web浏览器都实现了具有略微不同显示的透视图。这个问题是在这里看看我是否遗漏了一些东西，并且有一个可用的跨浏览器解决方案。

如果没有人有解决方案，那么，我们有一个有趣的情况。在此之前，我从未见过CSS中的一个功能在所有浏览器之间明显且无可挽回地不准确。

我希望我错了， 因为如果没有，我必须通过php或javascript浏览器检查来创建和维护三个单独的样式表，这个方法已经过时了并在今天的网页设计中皱起眉头。我们现在更喜欢使用Modernizr来检查功能而不是浏览器，但这种情况会证明解决方案是不可靠的。

示例情况：

在Chrome中，我定位了一个iPhone界面，模拟在手机上使用特定的家庭自动化应用程序来控制背景中的电视频道（实际视频），电视和iPhone看起来像他们是透视和变换的图像的一部分。

但是，从Firefox查看此内容时，元素完全不合适，如下所示。

问题：

是否有任何跨浏览器解决方案可以让我在不使用不同浏览器的单独样式表的情况下生成此结果？

Live JS Fiddle：

http://jsfiddle.net/qZSYy/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>

Answer 1

您错过了父元素上的transform-style: preserve-3d;。同时将perspective属性放在这里，稍后再详细说明：

.home-auto-wrap {
width: 100%;
background-color: #252525;
transform-style: preserve-3d;
perspective: 80px;
}

这是问题的一部分，因为Firefox需要它，Chrome没有 - 这解释了为什么它在那里工作。 Firefox的下一个问题是overflow: hidden上设置的.home-auto-interactive会导致所有后代元素根据规范展平：W3C Transform-style。

解决方法是将.tv-screen和.iphone-screen放在.home-auto-interactive之后，并将它们置于顶部。现在你正在改变的2个div将不会受到阻碍。

除了1以外的不透明度会导致任何后代元素在3D变换中变平，所以要小心保持身体中div不具有变换子元素的属性（使用z-index来定位元素后面或前面的元素div），或在转换元素本身的最后一个节点上。

背景图片属性不可动画，因此您需要使用图片标记将其关闭。

您引用电视的问题可能是由于：

1. iframe，尝试将该类应用于iframe，但它应该按原样运行。

2. 额外的0转换，无论如何都要摆脱这些。

3. 整个溢出的事情，如果你还没有这样做，请查看上面的链接。

此外，除了none之外的过滤器属性设置可能导致与溢出和不透明度相同的问题，再次按照规范。从IE 9开始就不需要它，所以除非你有这样做的后备原因，否则删除是一件好事。不透明度属性与3D变换具有相同或更好的支持：

Can I use opacity，检查三维变换，我还无法发布更多链接。当您在该页面时，请查看HTML5视频标记，它还具有与3d转换一样的浏览器支持。

Answer 2

看起来你需要另一个前缀。在您致电-webkit-perspective的任何地方，您还需要致电-moz-perspective。透视需要一个值：ems，px等。

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
http://css-tricks.com/almanac/properties/p/perspective/

这给了元素透视图，但是当你使用position:absolute;时，你还需要给父母一个定义的position position:relative;。

http://jsfiddle.net/NyXSa/7/

.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: 80px;
    -moz-perspective: 80px;
    perspective: 80px;
    margin-left: auto;
    margin-right: auto;

    position:relative;
}