CSS Card Effect not working on Mobile Safari - html

Question

I've built a card flip effect that seems to work on Safari Mobile regarding the "flip" aspect of the effect. However, the card is not displaying the correct image upon flipping. I'm using the effect as a "Before and After", using separate images on each side of the card. I'll post my code. Thank you.
.beforeafter {
margin: 10px auto;
text-align: center;
}
.card-container {
cursor: pointer;
height: 300px;
perspective: 600;
position: relative;
width: 300px;
display: inline-block;
}
.clientcard {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all .5s ease-in-out;
width: 100%;
}
.clientcard:hover {
transform: rotateY(180deg);
-webkit-transform: -webkit-translateY(180deg);
}
.clientcard .side {
backface-visibility: hidden;
border-radius: 2px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.clientcard .back {
background: #eaeaed;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
}
<div class="beforeafter">
<div class="card-container">
<div class="clientcard">
<div class="side"><img src="img/sean1.JPG"></div>
<div class="side back"><img src="img/sean1copy.JPG"></div>
</div>
</div>
<div class="card-container">
<div class="clientcard">
<div class="side"><img src="img/sean2.JPG"></div>
<div class="side back"><img src="img/sean2copy.JPG"></div>
</div>
</div>
<div class="card-container">
<div class="clientcard">
<div class="side"><img src="img/sean3copy.jpg"></div>
<div class="side back"><img src="img/sean3.jpg"></div>
</div>
</div>
<div class="card-container">
<div class="clientcard">
<div class="side"><img src="img/gwork.jpg"></div>
<div class="side back"><img src="img/alana2.jpeg"></div>
</div>
</div>
</div>

Answer 1

I believe you want to rotate on the Y axis in the negitive -180deg. I improved your code a bit and don't mind the shitty format it was translated from sass and if you want another card with flip copy and past that code
.card {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 52rem; }
.card_side {
height: 52rem;
transition: all 2s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
}
.card_side-front {
background-color: blue;
}
.card_side-back {
transform: rotateY(180deg);
}
.card_side-back-1 {
background-image: linear-gradient(to right bottom, #ffb900, #ff7730);
}
.card:hover .card_side-front {
transform: rotateY(-180deg);
}
.card:hover .card_side-back {
transform: rotateY(0);
}
.card_picture-1 {
background-color: blue;
}
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card_side card_side-front">
<h4 class="card_heading">
<span class="card_heading-span card_heading-span-1">card front text</span>
</h4>
</div>
<div class="card_side card_side-back card_side card_side-back-1">
<div class="card_cta">
<div class="card_price-box">
<p class="card_price-only">back text</p>
</div>
</div>
</div>
</div>
</div>