trasnform-style

I'm going to go from the outmost element to explain all functionality:

.content

• The ".content" is a class for a div that contains all content which will be depicted in a 3D space, like a frame if you will. We use it to declare the prespective, like "how far" the object will look based on the angles they are depicted in. Every single one of its children would be a 3D object, but only its direct children. If we want to depict deeply nested children in 3D, we must pass down the 3D space using the transform-style property later. But this outer container with the declared perspective makes sure that all children will be depicted in the same 3D space, not as if they would be in many parallel 3D spaces.

.content {
   perspective: 700px;
}

.photo-container

• The ".photo-container" is a class for the outside div of individual elements. It is only responsible to add space between the elements, so that they wouldn't be too close together.

.photo-container {
    text-align: center;
    margin-bottom: 2.5em;
}

.photo

• The ".photo" class is for the inside div containing the 3D element. It is determined to be a parent for the 3D object by the the transform-style: preserve-3d property. This means that all of it's children will be depicted in 3d. These objects will be depicted in the same 3D space declared 2 levels above, the same perspective. The transform-style just passes down the functionality to affect direct children.
• We add a transition with the transform parameter as well. This means that when we add the rotate transform on hover, that transform must be transitioned, instead of just changin in a blink of an eye.
• Note that this element is transformed, even though it is invisible. What we will actually see is it's children transformed!

.photo {
   transform-style: preserve-3d;
   transition: transform 1s cubic-bezier(.55, -.62, .27, 1.2);  
}

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

.side-a and .side-b

• Finally, the ".side-a" and ".side-b" classes are for the elements depicted in 3D. One of them is a div, another one is an img in this example.
• Since these are already 3D objects thanks to their parent, we can hide their backfaces. (Only 3D objects have backfaces.)
• We determine ".side-b" to be already rotated 180 degrees by default. This means that it will only show up, when we flip the parent element, as if it would be "on the other side".

.side-a, .side-b{
  backface-visibility: hidden;
}

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