javascript - 背面可见性在 safari 中不起作用

Question

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

`.card 容器{

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

.卡片{

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;   

#前面#后面{

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:hover .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;
}

希望对您有所帮助。