背面能见度不适用于野生动物园

Question

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

`.card容器{

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：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;
}

我希望这会对你有所帮助。