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 });
});

（我正在使用TweenLite和CSSPlugin的1.14.2版本）

我尝试设置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轴上旋转而部分隐藏了文本。

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

1 个答案: