Nothing happens...

I was a bit confused about this myself. I am using Firefox, and when I applied transform: rotateX() to the .photo class the images appeared squished vertically but not rotated. I was able to achieve the desired effect in two different ways. First, I changed the .photo class selector to .photo-container, which is a direct child of .content:

<div class="content clearfix">

            <div class="photo-container">
                <div class="photo">
                  <img class="side-a" src="img/photos/1.jpg" alt="Dazzling Auroras over Earth">

.content {
    perspective: 700px;
}

.photo-container {
    transform: rotateX(-35deg);
}

Alternately, I kept the class selectors as presented in the video and set the transform-style property (explained in the next video) of the .photo-container class to preserve-3d. This extends the 3d space to children of .photo-container, e.g. .photo.

.content {
    perspective: 700px;
}

.photo-container {
    transform-style: preserve-3d;
}

.photo {
    transform: rotateX(-35deg);
}

Good luck!

Check your browser type and version (Can I Use? is a good resource for this) to be sure that these features are supported, or if they might require a browser-specific prefix.

I added this .content, .photo-container { perspective: 700px; transform-style:preserve-3d; }

Here we are, almost two years later, and the same inconsistencies still exist.

Diana Rooks' answer provides the best fix, with adding the "transform-style: perserve-3d;" on the ".photo-container" class. Chrome appears to have assumed that option as a default.

The other answers regarding adding the "perspective" to ".photo-container" change the results, the perspective is then relative to each photo-container, producing an entirely different result.

I have verified this on Firefox and Chromium under Linux Mint 18.3 and on Safari, Firefox and Chrome under OS X Yosemite.