GSAP이면에는 가시성

내가 그러나 내가 backface-에 문제가있어, 배우고 내가 요소를 회전 3Dtransform를 사용하는 "회전 티켓"의 예를 만든 GreenSock Animation Platform (GSAP)

을 사용하기 시작하고있어

시계.

내 demo here (아래 코드)을 살펴보십시오. 제가 보는

문제는 다음과 같습니다 그래서 그것은 단지 '스핀'애니메이션의 한면에 표시

내가 backface-visibility: hidden를 사용하도록 <p> 내용을 필요 -이에 대한 CSS와 JS를 사용하여 시도했다 하지만 아무것도 작동하는 것 같다되지
애니메이션이 실행되는 #wish에 의사 :before 요소는 불쾌한 깜박임을 가지고

HTML :

<div id="wrap"> 
    <div id="wish"> 
     <p>Make a wish.<br> 
     Write it down.<br> 
     Tie it to the tree.</p> 
    </div> 
</div>

CSS (이하) :

* { 
    box-sizing: border-box; 
} 
body { 
    font-family: 'Source Sans Pro'; 
    background: #F8F8F8; 
    -webkit-font-smoothing:antialiased; 
} 
#wrap { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: block; 
    margin: -200px 0 0 -200px; 
    width: 400px; 
    height: 400px; 
    border-radius: 200px; 
    background: #89B650; 
    &:after { 
    position:absolute; 
    top:0; 
    left:200px; 
    display: block; 
    width: 1px; 
    height: 200px; 
    content:""; 
    background: white; 
    } 
} 
#wish { 
    z-index: 2; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin: -50px 0 0 -100px; 
    width:200px; 
    height: 100px; 
    border-radius: 0 50px 50px 0; 
    background: white; 
    text-align: left; 
    transform: rotate(-90deg); 
    p { 
    padding:16px 0 0 24px; 
    margin:0; 
    // -webkit-backface-visibility: hidden; 
    //backface-visibility: hidden; 
    } 
    &:before { 
    -webkit-backface-visibility: visible; 
    backface-visibility: visible; 
    content: ""; 
    position:absolute; 
    top:50%; 
    right:20px; 
    display: block; 
    margin:-10px 0 0 0; 
    width:20px; 
    height:20px; 
    border-radius: 10px; 
    background: #89B650; 
    } 
}

JS :

var container = $("#wrap"), 
    ticket = $("#wish"), 
    text = $("#wish p"); 

var tl = new TimelineMax(); 

tl.set(container, {perspective:800}); 
tl.set(text, {"backfaceVisibility":"hidden"}); 

tl.from(ticket, 3, { 
    rotationX:360, 
    repeat: -1, 
    repeatDelay: 2, 
    force3D:true, 
    transformStyle: "preserve-3d", 
})

UPDATE :

텍스트에 backface-visibility 문제는 의사 :before 요소있을 경우에만 발생하는 것 같습니다 부모님. 매우 이상합니다.

출처

2014-12-05 Mr Jonny Wood

이것은 GSAP Forums에 조나단에 의해 나에게 대답했다 :

당신은 당신의 #wish p 선택 (텍스트)에 backfaceVisibility:"hidden"와 함께 transformStyle:"preserve-3d"을 추가해야합니다
... 에 크롬의 깜박임을 제거합니다 http://codepen.io/jonathan/pen/GgooXG

출처

2014-12-05 19:21:40

GSAP이면에는 가시성

답변

관련 문제