My image flipping effect is not functioning properly in Safari and IE browsers.
Here is the code I am using:
.flipcard {
position: relative;
width: 220px;
height: 220px;
perspective: 500px;
margin: auto;
text-align: center;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
transform: rotateX(180deg);
-webkit-transform:transform: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
transform: rotateX(0deg);
-webkit-transform:transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
transform: rotateY(180deg);
-webkit-transform:transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
transform: rotateY(0deg);
-webkit-transform:transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
transform: rotateY(-180deg);
-webkit-transform:transform: rotateY(-180deg); /* Chrome, Safari, Opera */
}
.flipcard .front, .flipcard .back
{
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
border: 30px solid rgba(255, 255, 255, 0.5);
backface-visibility: hidden;
-webkit-transform:backface-visibility: hidden; /* Chrome, Safari, Opera */
}
.text_div{ background:#EF6A36; width:160px; height:160px; margin:0px; padding:0px;}
.text_div > img {
margin-top: -18px;
}
.flipcard p{font-size:14px;}
.text_div > h1 {
color: #fff;
height: 80px;
padding: 20% 5%;
width: 90%;
font-size:23px;
text-transform: uppercase;
line-height:60px;
}
.back > a {
background:#EF6A36;
color: #fff;
float: left;
font-family: helvetica_neuebold;
font-size: 24px;
font-weight: normal;
height: 42px;
list-style: outside none none;
padding: 60px 0;
text-align: center;
text-decoration: none;
width: 160px;
font-family: "HelveticaNeueLTPro-Cn";
margin-top:-21px;
}
HTML:-
<div class="flipcard h">
<div class="front">
<div class="text_div">
<img src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
<h1>Brand Blazing</h1>
<!--<p>Your truth . Your story. - Your rand</p> -->
</div>
</div>
<div class="back">
<img class="icon_margin" class="icon_margin" src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
<a href="<?php echo site_url(); ?>/brand">YOUR TRUTH</a>
</div>
</div>
The flipping effect works only on Mozilla and Chrome. I have tried searching on Google for solutions but with no luck. Any suggestions or alternatives would be greatly appreciated by anyone who can help.