Перевернуть карту CSS в Safari

Question

Я пытаюсь заставить флип карту CSS работать во всех браузерах. Я заставил его работать на всем, кроме Safari. Я использовал этот код:

/* entire container, keeps perspective */
.flip-container {
     perspective: 1000;
     transform-style: preserve-3d;
     display: inline-block;
}

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

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

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

 /* flip speed goes here */
 .flipper {
     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);
}

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

Но перед отображением заднего изображения перед мерцанием перед передним изображением мигает передняя часть.

Если вы зайдете на мой сайт, я поиграюсь с президентом компании, пока не получу его, пока не переформатирую всех остальных. http://www.logomatsdirect.com/our-team/

Какие-либо предложения?

Answer 1

/* hide back of pane during swap */
.front, .back {
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
 -webkit-transition: 0.6s;
         transition: 0.6s;
 -webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
 position: absolute;
 top: 0;
 left: 0;
 }

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

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

Это должно сделать свое дело

Answer 2

Вы можете всегда искать на caniuse.com поддерживаемые браузером свойства:

http://caniuse.com/#search=css3%203d%20transforms

Как там сказано, Safari по-прежнему требуется префикс для свойства backface-visibility.

Answer 3

Если вы используете transform свойство, вам нужно добавить префикс в него, чтобы он работал во всех браузерах. Для сафари нужно добавить -webkit- в качестве префикса, как это

.flip-container {
     perspective: 1000;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;
     display: inline-block;
}

-webkit- для сафари аналогично другой префикс для других браузеров.