javascript - 如何在 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 轴上旋转部分隐藏了您的文本。