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

我正在使用TweenLite在3d（透视）中为图像设置动画，并且图像上的文本不是动画的一部分。但在Safari（iOS和OsX）和Chrome（iOS）中，图像中“更接近”用户的部分会忽略文本

jsFiddle：

HTML:

JavaScript:

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

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

我尝试设置z索引，我尝试使用-webkit transform:translate3d（0,0,0），但到目前为止，Safari没有任何效果。（它在Firefox、Chrome（桌面和Android）、Explorer 11等浏览器中工作得非常好）

---

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

您需要将

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中测试）：

---

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

它正在工作！谢谢z是否像通常的z索引一样工作？因为我注意到，在z:50的情况下，我的文本的某些部分仍然被剪裁（但它并不像我第一次那样位于中间）。所以我试着增加z的值。但是如果值太高，#text元素完全不可见。我设法找到了一个值，即我的文本不再被剪裁，仍然可见，但我正试图准确地理解发生了什么。非常感谢您的回答！：d您可以使

z

相当于“y”轴旋转框宽度的一半<代码>z索引与z轴无关

z-index

是元素（如层）的堆叠顺序，而

z

与z轴上的三维位置（深度）有关。看见

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