How to get images to flip on a web page, like this

HTML & CSS
7

Thank you for your message and link.
I read that page and have gotten as far as adding the unordered list and replacing their images with a sample of my own, however I’m not sure what I should do next to get this to work.

Should I add this to GridLoadingEffoects/css/default.css:

    /* Effect 4: fall perspective */
.grid.effect-4 {
	perspective: 1300px;
}

.grid.effect-4 li {
	transform-style: preserve-3d;
}

.grid.effect-4 li.animate {
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	animation: fallPerspective .8s ease-in-out forwards;
}

@keyframes fallPerspective {
	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

And should I add this somewhere:

 new AnimOnScroll( document.getElementById( 'grid' ), {
	minDuration : 0.4,
	maxDuration : 0.7,
	viewportFactor : 0.2
} );

Any guidance will be appreciated.