My Website is Mirror-flipped on iPhone Devices

The issue that you are facing is because you are trying to flip the content. When you use the transform rotate property, on IOS, you are seeing the flipped content. The solution is to use backface-visibility.

.card .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

An element’s back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space.

You can read more about this here:

Browse More Popular Posts

Leave a Comment