Question

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

我创建了一个“旋转票证”的示例，它使用3Dtransform旋转元素，但是我在背面可见性方面遇到了麻烦。

查看我的demo here（下面的代码）。

我看到的问题是：

我需要<p>内容才能使用backface-visibility: hidden所以它只显示'旋转'动画的一面 - 我尝试过使用CSS和JS，但似乎没有任何效果
: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：

上回答了这个问题

您需要添加transformStyle:"preserve-3d" backfaceVisibility:"hidden" #wish p选择器（文字）...到。{ 移除Chrome中的闪烁：http://codepen.io/jonathan/pen/GgooXG

GSAP背面可见性

1 个答案: