My Solution! The code in this video doesn't seem to work as it should.

I noticed that even though I was following the steps exactly, my code was behaving differently than how it was for Guil in the video. I saw that others were also having issues with this, and tried using the solutions that worked for them, but none of them worked for me. So just in case anyone else has this issue in the future, I wanted to post my solution for the problem.

This was the only way I was able to get my code to behave exactly as it did in the video. This works in Chrome and Firefox

.content {
  perspective: 700px;
}

.photo-container {
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}

.photo {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.photo-container:hover {
  transform: rotateY(-180deg);
}

.side-b {
  transform: rotateY(180deg);
}

My backface-visibility property was the first thing that was giving me issues, and any attempts I made to try to solve it led to it not working correctly later on. So I figured that maybe applying the flipping transition to the entire container would work better, and it did. To be honest, the backface-visibility property in the code I posted isn't even really needed here for the code to work correctly, but I left it in because it still works as it's meant to I guess. It does hide the backsides of the photo and div.

Anyway, I hope this helps anyone that encounters the issues that I did.