CSS FlipCard в Safari (3d-трансформации) - PullRequest
Новая
       13

CSS FlipCard в Safari (3d-трансформации)

0 голосов
/ 12 февраля 2019

Простое приложение 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)");}

Буду признателен за любую помощь.

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Для других, вот решение, которое я нашел после нескольких дней проб и ошибок.Мой вопрос не предоставил истинную причину ошибки.У меня было фоновое изображение в родительском контейнере: 

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

Это вызвало мерцание и исчезновение текста на обратной стороне карты после переворачивания в Safari на iPad.

Я переместилфоновое изображение из родительского контейнера в передние и задние элементы.

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

В Safari на iPad это не сработало.

0 голосов
/ 12 февраля 2019

Попробуйте, пожалуйста 

$('#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);
}
...