CSS Card Flip in Safari

Question

I'm trying to get a CSS card flip to work on all browsers. I've gotten it to work on everything except Safari. I've used this code:

/* 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);
}

But the front flickers in front of the back image on hover before showing the back image.

If you go to my website, I've been playing around with just the president of the company's picture until I get it right before I reformat everyone else. http://www.logomatsdirect.com/our-team/

Any suggestions?

try using -webkit- – Dragutescu Alexandru Apr 06 '16 at 12:56 — Dragutescu Alexandru, Apr 06 '16 at 12:56

score 14 · Accepted Answer · answered Apr 06 '16 at 13:02

/* 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);
}

This should do the trick

BOOM! I've spend the entire day trying to hack a solution. My situation was I was getting a flicker of the back panel during the animated flip, but then the reverse image of the front panel persisting. This fixed what I was beginning to think was an unfixable problem. May unicorns sprinkle karma glitter on all your days to come. — brianfit, Feb 20 '18 at 21:33

score 2 · Answer 2 · edited Apr 06 '16 at 13:42

2

You can always look up in caniuse.com for browser's supported properties:

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

As stated there, Safari still require a prefix for the backface-visibility property.

edited Apr 06 '16 at 13:42

flavio.donze

7,432
9
58
91

answered Apr 06 '16 at 13:11

Alexandre Figueiredo

21
2

score 1 · Answer 3 · answered Apr 06 '16 at 13:00

If you are using transform property you need to add prefix in it to let it work in all browser. For safari you need to add -webkit- as a prefix like this

.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- is for safari similarly other prefix are for other browsers.

CSS Card Flip in Safari

3 Answers3