css - 跨浏览器透视解决方案？

Question

问题是什么

我已经在 IE、Firefox、Chrome 和 Opera 中测试了这种透视使用场景(一个经过 w3C 验证的网页，带有所有必要和可选的 CSS 浏览器标签)，并发现了不同的(全部不准确的)结果。到目前为止，Web 浏览器似乎都实现了略有不同显示的透视图。这个问题是为了看看我是否遗漏了什么并且有一个跨浏览器解决方案可用。

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

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

示例情况:

在 Chrome 中，我放置了一个 iPhone 界面，模拟在手机上使用特定的家庭自动化应用程序来控制背景中的电视 channel (实际视频)，其中电视和 iPhone 看起来像它们一样是具有透视和变换的图像的一部分。

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

问题:

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

实时 JS fiddle :

http://jsfiddle.net/qZSYy/1/

目的:

我正在为一家科技公司开发网站，其中一项主要服务是家庭自动化。只需一个 Remote ，或一部iPhone或iPad，你就可以控制家里的灯光、音乐、电视等，非常酷。因此，我决定开发一个模拟此功能的家庭自动化页面部分。

在 Chrome 上，它现在看起来像这样:

在 Firefox 上:

注意事项:

iphone 屏幕实际上是一个单独的元素，当悬停在上面时会打开并保持亮起 10 秒。我正在 iphone 上设计一个界面，它将控制房间的不同灯光、扬声器和电视，它实际上是一个单独的 div，也可以由 iPhone 控制并改变 channel 。

背景是我通过 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 的下一个问题是在 .home-auto-interactive 上设置的 overflow: hidden 导致所有后代元素根据规范被展平:W3C Transform-style .

解决方法是将 div .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 ，也检查 3d 变换，我还不能发布更多链接。当您在该页面时，请查看 HTML5 视频标签，它还具有与 3d 转换一样好的浏览器支持。