CSS Card Flip in Safari -

i'm trying css card flip work on browsers. i've gotten work on except safari. i've used code:

/* entire container, keeps perspective */ .flip-container {      perspective: 1000;      transform-style: preserve-3d;      display: inline-block; }  /*  updated! flip 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 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 */ .front {      z-index: 2;      transform: rotatey(0deg); }  /* back, hidden pane */ .back {      transform: rotatey(-180deg); } 

but front flickers in front of image on hover before showing image.

if go website, i've been playing around president of company's picture until right before reformat else. http://www.logomatsdirect.com/our-team/

any suggestions?

/* hide 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 */ .front {  z-index: 2;  -webkit-transform: rotatey(0deg);          transform: rotatey(0deg); }  /* back, hidden pane */ .back {  -webkit-transform: rotatey(-180deg);          transform: rotatey(-180deg); } 

this should trick