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

Question

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

`.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;
}

我希望这能帮到您.