Menu
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;
}
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);
}`
553
The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.
The back face is visible when turned towards the user. The back face is hidden, effectively making the element invisible when turned away from the user.
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.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
