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

如果您正在使用 transform 属性您需要在其中添加前缀以使其在所有浏览器中都能正常工作。对于 safari，您需要添加 -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- is for safari similarly other prefix are for other browsers.

Answer 2

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

您可以随时在 caniuse.com 中查找浏览器支持的属性：

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

正如此处所述，Safari 仍然需要为背面可见性添加前缀属性。

CSS Safari 中的卡片翻转

CSS Card Flip in Safari

css

card-flip