admin管理员组

文章数量:1173631

I am trying to uss cssflip animation in my code in which the element rotates when hovered upon. I have used transition and backface-visibilty property. It is working fine on chrome but it is not working properly on safari. I have used webkit prefix as well for safari browser.

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

}

front{

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

}

back{

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

} .card-container:hover .card{

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

}

back{

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

}`

I am trying to uss cssflip animation in my code in which the element rotates when hovered upon. I have used transition and backface-visibilty property. It is working fine on chrome but it is not working properly on safari. I have used webkit prefix as well for safari browser.

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

}

front{

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

}

back{

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

} .card-container:hover .card{

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

}

back{

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

}`

  • javascript
  • html
  • css
  • safari
Share Improve this question asked Mar 12, 2017 at 6:43 kashish behlkashish behl 1491 gold badge1 silver badge8 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 48

I think the issue here is with the 

backface-visibility: hidden;

It's not being supported in ios and in safari.

In your code just replace the code with

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

I hope this will help you.

本文标签： javascriptbackface visibility not working in safariStack Overflow

版权声明：本文标题：javascript - backface visibility not working in safari - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1737628072a1999475.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。