Карт-флип-анимация Internet Explorer 11

Я пытаюсь сделать флип-карту и показать ее заднюю сторону. Он работает во всех других браузерах, но не в Internet Explorer 11.Карт-флип-анимация Internet Explorer 11

Я попытался добавить префикс -ms, но это не помогло. Проблема заключается в том, что IE не поддерживает атрибут css transform-style: preserve-3d.

Вот jsfiddle: https://jsfiddle.net/gbkq94hr/

HTML

<body> 
    <article> 
     <div id="card0" class="card"> 
      <figure class="front"> 
      </figure> 
      <figure class="back"> 
      </figure> 
     </div> 
    </article> 
</body>

$(document).ready(function() { 
    var flipped = false; 
    var card = $("#card0"); 
    card.click(function() { flipFunction();}); 

    function flipFunction() { 
     if (flipped) { 
      flipped = false; 
      card.removeClass('flip'); 
     } else { 
      card.addClass('flip'); 
      flipped = true; 
     } 
    }; 
});

CSS

html { 
    height: 100%; 
} 

.flip { 
    transform: rotateY(180deg); 
} 

.card { 
    float:left; 
    width: 110px; 
    height: 139px; 
    cursor: pointer; 
    transform-style: preserve-3d; 
    transition: transform 1s; 
    position: relative; 
} 

figure { 
    margin: 0; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -ms-backface-visibility:hidden; 
} 

.back { 
    background-color: blue; 
    transform: rotateY(-180deg); 
} 

.front { 
    z-index: 2; 
    background-color: red; 
    transform:rotateY(0deg); 
} 

article { 
    height: 114px; 
    width: 114px; 
    perspective: 1000; 
}

EDIT:

Как было предложено в комментариях, я пробовал следовать инструкциям Дэвида Уолша, но все равно не мог заставить его работать. https://jsfiddle.net/w9o2chmn/2/

источник

2016-05-06 Waltari

Пожалуйста, обратитесь https://davidwalsh.name/css-flip может помочь – RRR

Это может сработать, но я не мог заставить его работать при нажатии кнопки. :/ – Waltari

любезно проверьте мой ответ – RRR

Привет, я изменил код jQuery, чтобы выполнить щелчок карты. Пожалуйста, проверьте https://jsfiddle.net/w9o2chmn/6/

HTML Я добавил класс flip-container к статье тег

<article class="flip-container"> 
    <div id="card0" class="card"> 
     <figure class="front"> 
     front 
     </figure> 
     <figure class="back"> 
     back 
     </figure> 
    </div> 
</article>

CSS Я удалил код CSS :hover и поместил его в JQuery нажмите

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    transform-style: preserve-3d; 
    color:#fff; 
} 

/* UPDATED! flip the pane when hovered */ 
    /*.flip-container:hover .back { 
     transform: rotateY(0deg); 
    } 
    .flip-container:hover .front { 
     transform: rotateY(180deg); 
    }*/ 

.flip-container, .front, .back { 
    width: 200px; 
    height: 200px; 
} 

/* flip speed goes here */ 
.card { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* UPDATED! front pane, placed above back */ 
.front { 
    z-index: 2; 
    transform: rotateY(0deg); 
    background:red; 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(-180deg); 
    background:blue; 
} 

/*

jQuery

$(document).ready(function() { 
    var flipped=false; 

    $('.flip-container').on('click', function(){ 
     if(!flipped){ 
     $('.back').css('transform','rotateY(0deg)'); 
     $('.front').css('transform','rotateY(180deg)'); 
     flipped=true; 
     console.log('true part :'+flipped); 
     } 
     else{ 
     $('.back').css('transform','rotateY(180deg)'); 
     $('.front').css('transform','rotateY(0deg)'); 
     flipped=false; 
     console.log('else part :'+flipped); 
     } 
    }); 


});

Пожалуйста, дайте мне знать, если его работы для вас ...

PS: Я проверил это на IE11 и его работы для меня

источник

2016-05-06 10:40:58 RRR

jsFiddle не работает для меня в IE11. Я нахожусь в Windows 10 – nebulousGirl

Это замечательно и работает для меня в IE11, Opera, Firefox и Chrome, но в Safari анимация выглядит странно. Похоже, что половина карты красная и полусиная. Есть идеи, как это исправить? –

не работает на ie11 на окнах 10, только на окнах 8 –

Карт-флип-анимация Internet Explorer 11

ответ

Смежные вопросы