与Greensock Tween和Safari的翻转卡片

Question

我找到了一支笔：

http://codepen.io/rhernando/pen/vjGxH

HTML

<div id="mainWrap">
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
</div>
<div style="clear:both;"></div>

<div id="mainWrap" style="margin-top:10px;">
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
</div>

CSS

body
{
  background:#444;
}
.cardCont
{
  width:250px;
  height:400px;
  float:left;
  margin-right:10px;
  position:relative;
  /*border:solid 2px #fff;*/
}
.cardFront, .cardBack
{
  position:absolute;
  width:250px;
  height:400px;
  background:url('http://s.cdpn.io/33073/lorempixel.jpg');
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}
.cardBack
{
  background:url('http://s.cdpn.io/33073/lorempixe1l.jpg');
}

.playcardFront
{
  background:url("http://unlimitedpotentialnow.com/wp-content/uploads/2012/01/Bouquet-cs.jpg");
}
.playcardBack
{  background:url("http://i203.photobucket.com/albums/aa158/Comic1111/ACe.png");
}

JS

CSSPlugin.defaultTransformPerspective = 1000;

//we set the backface 
TweenMax.set($(".cardBack"), {rotationY:-180});

$.each($(".cardCont"), function(i,element) {

    var frontCard = $(this).children(".cardFront"),
      backCard = $(this).children(".cardBack"),
      tl = new TimelineMax({paused:true});

    tl
        .to(frontCard, 1, {rotationY:180})
        .to(backCard, 1, {rotationY:0},0)
        .to(element, .5, {z:50},0)
        .to(element, .5, {z:0},.5);

    element.animation = tl;

});

$(".cardCont").hover(elOver, elOut);

function elOver() {
    this.animation.play();
}

function elOut() {
    this.animation.reverse();
}

使用greensock显示效果很好。 问题是不是跨浏览器，因为它不适用于safari。

有人可以帮助我理解为什么吗？

由于