如何在Safari上修改三維變換圖像上的剪切文本？

我正在使用TweenLite在3D（透視圖）中爲圖像製作動畫，並且在圖像上有不屬於動畫的文字。但是在Safari（iOS和OsX）和Chrome（iOS）中，與用戶「接近」的圖像部分會覆蓋文本。如何在Safari上修改三維變換圖像上的剪切文本？

的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的版本1.14.2和CSSP lugin）

我試着設置一個z-index，我試着用-webkit-transform：translate3d（0,0,0），但是目前爲止Safari瀏覽器還沒有工作。（它在Firefox，Chrome（桌面和Android），Explorer 11中都能很好地工作......）

任何人都有一個想法，我該如何解決這個問題？

來源

2014-12-04 Gabriel

您將需要添加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軸上旋轉而部分隱藏了文本。

來源

2015-01-23 16:17:31

它的工作！謝謝！ z是否像通常的z-索引一樣工作？因爲我注意到在z：50的情況下，我的文本的某些部分仍然被裁剪（但它並不像我第一次那樣）。所以我試圖增加z的價值。但是，如果值太高，#text元素是完全不可見的。我設法找到一個值，我的文本不再被剪切，仍然可見，但我試圖瞭解到底發生了什麼。非常感謝您的回答！：D – Gabriel 2015-01-26 16:02:15

你可以讓'z'相當於你的'y'軸旋轉盒子寬度的一半。 'z-index'與z軸無關。 'z-index'是元素的疊加順序（如圖層），而'z'則與z軸上的3D位置（深度）有關。請參閱https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms – 2015-01-26 16:56:54

如何在Safari上修改三維變換圖像上的剪切文本？

回答

相關問題