代码之家  ›  专栏  ›  技术社区  ›  Cymro

Safari中的CSS动画卡(3d转换)

  •  0
  • Cymro  · 技术社区  · 7 年前

    一个简单的FlipCard应用程序。这个应用程序在Chrome上运行良好,但在Safari上则不起作用。 在Safari中,单击时,会看到卡背面的文本,它会闪烁,然后消失。

    代码的想法来自以下链接: w3schools/howto/css-flip-card

    HTML格式:

    <div class='flip-card'>
    <div class='flip-card-inner'>
    <div class='flip-card-front'><p>1</p></div> 
    <div class='flip-card-back'><p>2</p></div> 
    </div> 
    </div> 
    

    CSS:

    .flip-card {
    perspective:1000px;
    -webkit-perspective:1000px}
    
    .flip-card-inner {
    position:relative; 
    transition:transform 0.8s;
    -webkit-transition:-webkit-transform 0.8s;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d}
    
    .flip-card-front, .flip-card-back {
    position:absolute;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;}
    
    .flip-card-back  {
    transform:rotateY(180deg);
    -webkit-transform: rotateY(180deg);}
    

    JS公司:

    $('#flash-card-game').on('click',function(){FlipToBack()});
    
    function FlipToBack(){
    $('#flash-card-game').css("transform","rotateY(180deg)");
    $('#flash-card-game').css("-webkit-transform","rotateY(180deg)");
    setTimeout(FlipToFront,1000);}
    
    function FlipToFront(){
    $('#flash-card-game').css("transform","rotateY(0deg)");
    $('#flash-card-game').css("-webkit-transform","rotateY(0deg)");} 
    

    任何帮助都将不胜感激。

    1 回复  |  直到 7 年前
        1
  •  1
  •   E.Omar    7 年前

    请试试这个

    $('#flash-card-game').on('click', function() {
      FlipToBack()
    });
    
    function FlipToFront() {
      $('#flash-card-game').removeClass("flip-to-back");
      $('#flash-card-game').addClass("flip-to-front");
    }
    
    function FlipToBack() {
      $('#flash-card-game').addClass("flip-to-back");
      setTimeout(FlipToFront, 1000);
    }
    Write the folowing CSS
    
    .flip-to-front {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    
    .flip-to-back {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
        2
  •  0
  •   Cymro    7 年前

    对其他人来说,这是我经过几天的反复试验后找到的解决方案。 我的问题没有提供错误的真正原因。我在父容器中有一个背景图像:

    .flip-card-inner {background:url('image.png') no-repeat top}
    

    这导致卡片背面的文字在iPad上翻动Safari后闪烁消失。

    我将背景图像从父容器移动到前元素和后元素。

    .flip-card-front, .flip-card-back {background:url('image.png') no-repeat top}
    

    然后,它在iPad上的Safari中没有问题。

    推荐文章