GSAP-видимость противоположной стороны

Question

Я начинаю изучать и использовать GreenSock Animation Platform (GSAP)

я создал пример «спиннинг билета», который использует 3Dtransform, чтобы повернуть элемент, но у меня возникает проблемы с backface- видимость.

Посмотрите на мой demo here (код ниже).

Проблемы я вижу, являются:

1. Мне нужно <p> содержание использовать backface-visibility: hidden так это показывает только на одной стороне «спина» анимации - я попытался с помощью CSS и JS для этого но ничего не похоже на работу
2. псевдо :before элемент на #wish имеет неприятный мерцать, как работает анимация

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 (Less):

* { 
    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 элемент на родителя. Очень странно.

Answer 1

Это ответили мне Джонатан на GSAP Forums:

Вам нужно будет добавить transformStyle:"preserve-3d" вместе с backfaceVisibility:"hidden" к вашему #wish p селектору (текст) ... чтобы удалить мерцание в Chrome: http://codepen.io/jonathan/pen/GgooXG