如何在 Safari 上修复 3D 变换图像上的剪辑文本？

Question

我正在使用 TweenLite 为 3d（透视）图像制作动画，并且我在图像上放置了不属于动画一部分的文本。但是在 Safari（iOS 和 OsX）和 Chrome (iOS) 中，图像中离用户“更近”的部分会覆盖文本。

jsFiddle：http://jsfiddle.net/k1afbe3k/6/

HTML：

<div id="container">
    <div id="cover">
        <img src="http://i.imgur.com/lKBKKyj.jpg" alt="test" />
    </div>
    <div id="text">
        <h1>This is some text</h1>
    </div>
</div>
<div id="btn">Animate</div>

CSS：

#container { height: 200px; position: relative; width: 200px; }
#cover { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
#cover img { display:block; height: 100%; width: 100%; }
#text { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; -webkit-transform: translate3d(0,0,0); }
#text h1 { color: #fff; text-align: center; }

JavaScript：

TweenLite.set($('#container'), {perspective:1800});
$('#btn').on('click', function(){
    TweenLite.to($('#cover'), 0.4, { rotationY: -15 });
});

（我使用的是 1.14.2 版的 TweenLite 和 CSSPlugin）

我尝试设置 z-index，我尝试使用 -webkit-transform: translate3d(0,0,0) 但到目前为止 Safari 没有任何效果。 （它在 Firefox、Chrome（桌面和 Android）、Explorer 11 中完美运行...）

有人知道我该如何解决这个问题吗？

Answer 1

您需要将 transformStyle:"preserve-3d" 和 z:50 添加到您的文本 div #text：

TweenLite.set($('#text'), {transformStyle:"preserve-3d",z:50});

所以你的代码是这样的：

$(document).ready(function(){
    TweenLite.set($('#container'), {perspective:1800});
    // add the below
    TweenLite.set($('#text'), {transformStyle:"preserve-3d", z:50});
    $('#btn').on('click', function(){
        TweenLite.to($('#cover'), 0.4, { rotationY: -15 });
    });
});

工作示例（在 Chrome 或 Safari 中测试）：

http://jsfiddle.net/k1afbe3k/16/

您必须在 z 轴上移动文本 div 的原因是图像在 y 轴上旋转部分隐藏了您的文本。