背面可见性在 Safari 中不起作用

Question

我正在尝试在我的代码中使用 cssflip 动画，其中元素在悬停时会旋转。我使用了过渡和背面可见性属性。它在 chrome 上运行良好，但在 safari 上运行不正常。我也为 safari 浏览器使用了 webkit 前缀。

`.card-container{

margin-top: 9%;
perspective: 900px;
-webkit-perspective: 900px;
z-index: 1;

}

.card{

float: left;
width: 78.5%;
height: 35%;
margin-top: 25%;
border: 1px solid #A08C87;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;   

}

#front #back{

color: white;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

正面{

backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

返回{

display: flex;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
font-size: 20px;

} .card-container:悬停 .card{

transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);

}

返回{

transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);

}`

Answer 1

我认为这里的问题在于

backface-visibility: hidden;

ios 和 safari 不支持它。

在您的代码中，只需将代码替换为

 #front #back {
    color: white;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    backface-visibility: hidden;
}

希望对你有帮助。