CODEWITHSUNDEEP
csscard-flip
Calle
Calle

Reputation: 185

CSS Card Flip in Safari

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?

Upvotes: 8

Views: 6677

Answers (3)

Alexandre Figueiredo
Alexandre Figueiredo

Reputation: 21

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.

Upvotes: 2

damiano celent
damiano celent

Reputation: 709

/* 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

Upvotes: 14

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

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.

Upvotes: 1

Related Questions