Question

我正在尝试使用Greensock翻转图像，例如翻转卡片动画，但是我遇到了这样的问题

1：我在野生动物园中有一个小故障问题，例如：https://codepen.io/anon/pen/pOOmQv 如果您要从野生动物园打开这支笔，您可以看到它：

我通过在CSS属性中添加.front和.back类来解决此问题：

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;

问题在于它不像是翻转动画，这是我的代码，还有密码笔：https://codepen.io/anon/pen/zJJVZE

您可以告诉我我在哪里犯错了？

HTML

<div class="main">
<div class="container" id="scene">
  <div class="cardWrapper">
    <div class="card">
      <div class="cardFace front"><img src="https://image.ibb.co/cFwZpz/a1.png" class="p1"></div>
      <div class="cardFace back"><img src="https://image.ibb.co/fCdQwe/a2.png" class="p1a"></div>
    </div>
  </div> 
</div>          
</div>

CSS

.main {
   position: relative;
    width: 400px;
    height: 400px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container {
    position:absolute;
    display: block;
    width: 400px;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    visibility: hidden;
    border: 1px solid #000;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


  .cardface {
     position:absolute;
   width:100px;
    height:100px; 
    overflow:hidden;
  }

.front {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    transform-style: preserve-3d;
  transform-origin: center right;
}
.back {
  -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  rotationX:-180;
      transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.p1, .p1a {
    width:100px;
    height:100px; 
  position:absolute;
}

.cardWrapper{
   width:100px;
    height:100px; 
    top: 10px;
    left: 42.5px;
   position:relative;
    /*background-color:#333;*/
    cursor:pointer;
    -webkit-font-smoothing:antialiased;
  }

JS

TweenLite.set(".cardWrapper", {perspective:800});
TweenLite.set(".card", {transformStyle:"preserve-3d"});
TweenLite.set(".back", {rotationX:-180});
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});


var scene = document.getElementById('scene');



var mtl = new TimelineMax({ paused: false });

// ---- Animation Timelines ------
mtl.set(scene, { visibility: "visible" })

  .to(".front", 1, {rotationX:180, alpha:1,ease:Sine.easeOut})
    .to(".back", 1, {rotationX:0, ease:Sine.easeOut}, "-=.9")
;   

//----- Window Onload ------
window.onload = function() {
    mtl.play();
    console.log('fg');
};

在野生动物园中翻转怪异

0 个答案: