“Rotate-on-Hover” 3D Gallery using CSS3 transforms - Create a 3-D picture gallery using only CSS.

rotate-on-hover.css

@charset "utf-8";
/* Delete all margins and paddings from Gallery items */
/* Check the article at: https://imelgrat.me/css/3d-gallery-css3-transforms/ */

.gallery-container * {
		margin: 0;
		padding: 0;
}

.gallery-container {
		background: #efe6ac;
		/* Old browsers */
		
		background: -moz-linear-gradient(top, #efe6ac 0%, #fefcea 100%);
		/* FF3.6+ */
		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efe6ac), color-stop(100%, #fefcea));
		/* Chrome,Safari4+ */
		
		background: -webkit-linear-gradient(top, #efe6ac 0%, #fefcea 100%);
		/* Chrome10+,Safari5.1+ */
		
		background: -o-linear-gradient(top, #efe6ac 0%, #fefcea 100%);
		/* Opera 11.10+ */
		
		background: -ms-linear-gradient(top, #efe6ac 0%, #fefcea 100%);
		/* IE10+ */
		
		background: linear-gradient(to bottom, #efe6ac 0%, #fefcea 100%);
		/* W3C */
}
/* Picture container */

.gallery-picture {
		box-sizing: border-box;
		display: inline-block;
		margin-bottom: 75px;
		min-width: 300px;
		width: 24%;
}
/* Picture size and layout */

.thumb {
		width: 100%;
		height: 225px;
		margin: 0 auto;
		perspective: 1000px;
}

.thumb a {
		display: block;
		width: 100%;
		height: 100%;
		background-size: 0, cover;
		transform-style: preserve-3d;
		transition: all 0.5s;
		transform: rotateX(80deg);
		transform-origin: bottom;
		border: none;
		outline: none;
		background-repeat: no-repeat;
		background-position: center center;
}

.thumb a.pic1 {
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://res.cloudinary.com/imelgrat/image/upload/v1504180568/3d-reveal-picture-1_ctjp6j.jpg");
}

.thumb a.pic2 {
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://res.cloudinary.com/imelgrat/image/upload/v1504180568/3d-reveal-picture-2_ilktpf.jpg");
}

.thumb a.pic3 {
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://res.cloudinary.com/imelgrat/image/upload/v1504180567/3d-reveal-picture-3_df1dmj.jpg");
}

.thumb a.pic4 {
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://res.cloudinary.com/imelgrat/image/upload/v1504180568/3d-reveal-picture-4_h309hn.jpg");
}

.thumb:hover a,
.thumb:focus a,
.thumb:active a {
		transform: rotateX(0deg);
		transform-origin: bottom;
}
/* Bottom side */

.thumb a:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 30px;
		background: inherit;
		background-size: cover, cover;
		background-position: bottom;
		transform: rotateX(90deg);
		transform-origin: bottom;
}
/* Picture caption  style*/

.thumb a span {
		color: white;
		text-transform: uppercase;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		font: bold 12px/30px Ubuntu;
		text-align: center;
		transform: rotateX(-89.99deg);
		transform-origin: top;
}
/* Picture shadow */

.thumb a:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
		transition: all 0.5s;
		opacity: 0.15;
		transform: rotateX(95deg) translateZ(-80px) scale(0.75);
		transform-origin: bottom;
		opacity: 1;
		box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
		transform: rotateX(0) translateZ(-60px) scale(0.85);
}

rotate-on-hover.html

<div class="gallery-container">
		<div class="gallery-picture">
				<div class="thumb">
						<a target="_blank" href="http://imelgrat.me" class="pic1">
								<span>3D - Picture 1</span> </a>
				</div>
		</div>
		<div class="gallery-picture">
				<div class="thumb">
						<a target="_blank" href="https://imelgrat.me" class="pic2">
								<span>3D - Picture 2</span> </a>
				</div>
		</div>
		<div class="gallery-picture">
				<div class="thumb">
						<a target="_blank" href="https://imelgrat.me" class="pic3">
								<span>3D - Picture 3</span> </a>
				</div>
		</div>
		<div class="gallery-picture">
				<div class="thumb">
						<a target="_blank" href="https://imelgrat.me" class="pic4">
								<span>3D - Picture 4</span> </a>
				</div>
		</div>
</div>