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

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

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

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

如上所述，Safari仍需要背面可见性属性的前缀。

Answer 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，其他前缀适用于其他浏览器。

Safari中的CSS卡翻转

3 个答案: