jquery - GSAP 背面可见性

Question

我开始学习和使用 GreenSock Animation Platform (GSAP)

我创建了一个使用 3D 变换来旋转元素的“旋转票”示例，但是我在背面可见性方面遇到了问题。

看看我的 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(更少):

* {
  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",
})

更新:

backface-visibility文本问题似乎只在存在伪 :before 时出现它的父元素。很奇怪。

Answer 1

Jonathan 在 GSAP Forums 上为我回答了这个问题:

You will need to add transformStyle:"preserve-3d" along with backfaceVisibility:"hidden" to your #wish p selector (text)... to remove the flicker in Chrome: http://codepen.io/jonathan/pen/GgooXG