Странно переворачивать в сафари - PullRequest
Новая
       98

Странно переворачивать в сафари

0 голосов
/ 17 сентября 2018

Я пытаюсь перевернуть изображение, как анимацию переворачивания карты с Гринсок, но у меня такая проблема

1: у меня проблема с сафари, как здесь: https://codepen.io/anon/pen/pOOmQv если вы откроете эту ручку из сафари, вы можете увидеть ее:

Я исправил эту проблему, добавив классы .front и .back в свойствах css: 

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  1. Проблема в том, что это не похоже на анимацию, вот мой код и кодовая ручка: 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');
};
...