2

我有一个我正在开发的网络应用程序，它严重依赖于绝对定位、CSS 转换和 CSS 转换。

我的标记：

<div class="wrapper">
    <div class="background" ></div>
    <div class="foreground" >
        <div class="image" ></div>
    </div>
</div>​

我的 CSS

.wrapper{
    -webkit-perspective: 1600;
    -webkit-perspective-origin-y: 30%;
    height: 500px;
    width: 100%;
}

.background{
    position: absolute;
    background-size: 100% 100%;
    background-image: url("http://farm9.staticflickr.com/8321/8038059897_403c567211.jpg");
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 0;
    pointer-events: none;
    -webkit-transform:translate3d(0px,0px,0px);
}

.foreground{
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    -webkit-transform: rotateY(25deg);
}

.foreground .image{
    background-image: url("http://farm7.staticflickr.com/6139/6198476123_754eaa1920_m.jpg");
    position: absolute;
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform:translate3d(0px,10px,0px);
}

您可以在http://jsfiddle.net/KjG3f/24/上看到它的实际效果

如果您在 Safari（桌面和 iOS）中查看示例，您会看到前景图像被背景裁剪。但是，在 Chrome 中，它似乎可以正常工作。

从背景中删除 translate3d() 似乎会导致渲染工作，但我需要 translate3d() 用于动画目的。

抢先感谢您的帮助。​</p>

4

1 回答 1

1

我认为这是 Chrome 中的一个错误，并且确实有两个关于它的问题（http://code.google.com/p/chromium/issues/detail?id=116710 和http://code.google。 com/p/chromium/issues/detail?id=102673）。Firefox 表现出相同的行为。

Safari 的做法很有意义......当您在 3D 空间中旋转前景图像时，它应该剪切掉它后面的图像，因为它们在同一平面上。如果您更改前景或背景元素上的 translate3d Z 值，您可以将它们向前或向后移动到它们不相交的位置。

不幸的是，跨浏览器对 3D 转换的支持仍然很弱，祝你好运！

于 2012-10-04T01:30:35.550 回答