我试图在我的代码中使用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);

}`