Safari에서 3D 변형 이미지 위에 잘린 텍스트를 수정하는 방법은 무엇입니까?

Question

저는 TweenLite를 사용하여 이미지를 3 차원 (원근감)으로 움직이고 있는데, 애니메이션의 일부가 아닌 이미지 위에 텍스트가 있습니다. 하지만 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; } 

자바 스크립트 :

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 등)에서 완벽하게 작동합니다.

누구든지이 문제를 어떻게 해결할 수 있습니까?

Answer 1

당신은 당신의 텍스트 DIV #text에 transformStyle:"preserve-3d" 및 z:50을 추가해야합니다

이

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

:

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

z 축에서 텍스트 div를 이동해야하는 이유는 y 축에서 회전하는 이미지가 부분적으로 텍스트를 숨기기 때문입니다.