Safari 中的 CSS 卡片翻转答案

【问题标题】：CSS Card Flip in SafariSafari 中的 CSS 卡片翻转
【发布时间】：2016-07-26 21:20:17
【问题描述】：

我正在尝试让 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/

有什么建议吗？

【问题讨论】：

尝试使用-webkit-

标签： css card-flip

【解决方案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);
}

这应该可以解决问题

【讨论】：

轰隆隆！我花了一整天的时间试图破解一个解决方案。我的情况是在动画翻转过程中后面板闪烁，但前面板的反向图像仍然存在。这解决了我开始认为是无法解决的问题。愿独角兽在你未来的每一天都洒下因果报应。

【解决方案2】：

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

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

如上所述，Safari 仍然需要 backface-visibility 属性的前缀。

【讨论】：

【解决方案3】：

如果您使用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- 用于 safari，其他前缀也用于其他浏览器。

【讨论】：