10+ CSS 3D Image Effect Examples

This post contains a total of 10+ CSS 3D Image Effect Examples with Source Code. All these 3D Image Effects are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS 3D Image Effect Examples

1. 3D Image on hover

Made by Dennys Dionigi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/*custom font - Montserrat*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
	background: #544; /*fallback*/
	background: linear-gradient(#544, #565);
}

/*Thumbnail Background*/
.thumb {
	width: 400px; height: 300px; margin: 70px auto;
	perspective: 1000px; border-radius:5px;
}
.thumb a {
	display: block; width: 100%; height: 100%;
	/*double layered BG for lighting effect*/
	background: 
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("http://thecodeplayer.com/u/m/i1.png");
	/*disabling the translucent black bg on the main image*/
	background-size: 0, cover;
	/*3d space for children*/
	transform-style: preserve-3d;
	transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
	/*36px high element positioned at the bottom of the image*/
	content: ''; position: absolute; left: 0; bottom: 0; 
	width: 100%; height: 36px;
	/*inherit the main BG*/
	background: inherit; background-size: cover, cover;
	/*draw the BG bottom up*/
	background-position: bottom;
	/*rotate the surface 90deg on the bottom axis*/
	transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
	color: white; text-transform: uppercase;
	position: absolute; top: 100%; left: 0; width: 100%;
	font: bold 12px/36px Montserrat; text-align: center;
	/*the rotation is a bit less than the bottom surface to avoid flickering*/
	transform: rotateX(-89.99deg); transform-origin: top;
	z-index: 1;
}
/*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; 
	/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
	opacity: 0.15;
	transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin: bottom;
}
.thumb:hover a:before {
	opacity: 1;
	/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
	box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
	/*pushing the shadow down and scaling it down to size*/
	transform: rotateX(0) translateZ(-60px) scale(0.85);
}
</style>
</head>
<body>
  <!-- Container -->
<div class="thumb">
	<!-- Image -->
	<a href="#">
		<!-- Label -->
		<span>Why Not?</span>
	</a>
</div>
</body>
</html>

2. One background for multiple divs

Made by Ivan Bogachev. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
  min-height: 100%;
}
body {
  background: linear-gradient(125deg, #302015 0%, #1C1008 100%);
}
.example {
  position: relative;
  width: 80%;
  padding-top: 50%;
  margin: 2rem auto;
}
.example > .block {
  position: absolute;
  height: 100%;
  width: 30%;
  perspective: 1000px;
}
.example > .block:nth-of-type(1) {
  height: 80%;
  top: 10%;
  left: 17%;
  width: 15%;
}
.example > .block:nth-of-type(2) {
  top: 0;
  left: 35%;
}
.example > .block:nth-of-type(3) {
  height: 80%;
  top: 10%;
  left: 64%;
  width: 15%;
}
.example > .block > .side {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('https://picsum.photos/id/1025/1024/768');
  background-size: auto 100%;
  box-shadow: -1vw 0.5vw 1vw rgba(0, 0, 0, 0.3);
}
.example > .block > .side.-main {
  height: 100%;
  width: 100%;
  transform: rotateY(30deg);
  transform-origin: 0 50%;
}
.example > .block > .side.-left {
  height: 100%;
  width: 20%;
  transform-origin: 0 50%;
  transform: rotateY(-60deg) translateX(-100%);
  filter: brightness(40%);
}
.example > .block:nth-of-type(1) > .side.-main {
  background-position: 4% 50%;
  background-size: auto 130%;
}
.example > .block:nth-of-type(1) > .side.-left {
  background-position: 0 50%;
  background-size: auto 130%;
}
.example > .block:nth-of-type(2) > .side.-main {
  background-position: 50% 0;
}
.example > .block:nth-of-type(2) > .side.-left {
  background-position: 28.5% 0;
}
.example > .block:nth-of-type(3) > .side.-main {
  background-position: 96% 50%;
  background-size: auto 130%;
}
.example > .block:nth-of-type(3) > .side.-left {
  background-position: 78% 50%;
  background-size: auto 130%;
}
</style>
</head>
<body>
  <div class="example">
  <div class="block">
    <div class="side -main"></div>
    <div class="side -left"></div>
  </div>
  <div class="block">
    <div class="side -main"></div>
    <div class="side -left"></div>
  </div>
  <div class="block">
    <div class="side -main"></div>
    <div class="side -left"></div>
  </div>
</div>
</body>
</html>

3. 3D image hover CSS

Made by Shounak Ghosh. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  position: relative;
  width: 360px;
  height: 640px;
  margin-top: 150px;
  background: rgba(0, 0, 0, 0);
  transform: rotate(-30deg) skew(25deg) scale(0.8);
  transition: 0.5s;
}
.container img {
  position: absolute;
  width: 100%;
  transition: 0.5s;
}
.container:hover img:nth-child(4) {
  transform: translate(160px, -160px);
  opacity: 1;
}
.container:hover img:nth-child(3) {
  transform: translate(120px, -120px);
  opacity: 0.8;
}
.container:hover img:nth-child(2) {
  transform: translate(80px, -80px);
  opacity: 0.6;
}
.container:hover img:nth-child(1) {
  transform: translate(40px, -40px);
  opacity: 0.4;
}
</style>
</head>
<body>
  <div class="container">
    <img src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png">
    <img src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png">
    <img src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png">
    <img src="https://res.cloudinary.com/websway/image/upload/v1538242836/img_vkgzwy.png">
  </div>
</body>
</html>

4. 3D effect on hover – CSS only

Made by Vincent Durand. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
html {
  height: 100%;
}

body {
  text-align: center;
  height: 100%;
  background-color: #2C4159;
  font-family: "Open Sans", sans-serif;
}
body:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.reflection-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.reflection-container:before {
  content: "Hover me โžœ";
  color: #fff;
  position: absolute;
  left: -1rem;
  top: 50%;
  font-size: 6vh;
  transform: translateX(-100%) translateY(-50%);
}
.reflection-container .reflection-content {
  height: 80vh;
  width: 80vh;
  background: #000 url(https://unsplash.it/800/800/?random);
  background-size: cover;
  background-position: center;
  transform: rotateX(0) rotateY(0);
  pointer-events: none;
  transition: 100ms linear transform;
  overflow: hidden;
}
.reflection-container .reflection-content:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
}
.reflection-container .reflection-grid-cell {
  position: absolute;
  z-index: 1;
  width: 10%;
  height: 10%;
}
.reflection-container .reflection-grid-cell-1 {
  top: 0%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-1:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-1:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-2 {
  top: 0%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-2:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-2:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-3 {
  top: 0%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-3:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-3:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-4 {
  top: 0%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-4:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-4:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-5 {
  top: 0%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-5:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-5:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-6 {
  top: 0%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-6:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-6:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-7 {
  top: 0%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-7:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-7:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-8 {
  top: 0%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-8:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-8:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-9 {
  top: 0%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-9:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-9:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-10 {
  top: 0%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-10:hover ~ .reflection-content {
  transform: rotateX(20deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-10:hover ~ .reflection-content:before {
  transform: translateY(20%);
}
.reflection-container .reflection-grid-cell-11 {
  top: 10%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-11:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-11:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-12 {
  top: 10%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-12:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-12:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-13 {
  top: 10%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-13:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-13:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-14 {
  top: 10%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-14:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-14:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-15 {
  top: 10%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-15:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-15:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-16 {
  top: 10%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-16:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-16:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-17 {
  top: 10%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-17:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-17:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-18 {
  top: 10%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-18:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-18:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-19 {
  top: 10%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-19:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-19:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-20 {
  top: 10%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-20:hover ~ .reflection-content {
  transform: rotateX(15deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-20:hover ~ .reflection-content:before {
  transform: translateY(15%);
}
.reflection-container .reflection-grid-cell-21 {
  top: 20%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-21:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-21:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-22 {
  top: 20%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-22:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-22:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-23 {
  top: 20%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-23:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-23:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-24 {
  top: 20%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-24:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-24:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-25 {
  top: 20%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-25:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-25:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-26 {
  top: 20%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-26:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-26:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-27 {
  top: 20%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-27:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-27:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-28 {
  top: 20%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-28:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-28:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-29 {
  top: 20%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-29:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-29:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-30 {
  top: 20%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-30:hover ~ .reflection-content {
  transform: rotateX(10deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-30:hover ~ .reflection-content:before {
  transform: translateY(10%);
}
.reflection-container .reflection-grid-cell-31 {
  top: 30%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-31:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-31:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-32 {
  top: 30%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-32:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-32:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-33 {
  top: 30%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-33:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-33:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-34 {
  top: 30%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-34:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-34:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-35 {
  top: 30%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-35:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-35:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-36 {
  top: 30%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-36:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-36:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-37 {
  top: 30%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-37:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-37:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-38 {
  top: 30%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-38:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-38:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-39 {
  top: 30%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-39:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-39:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-40 {
  top: 30%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-40:hover ~ .reflection-content {
  transform: rotateX(5deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-40:hover ~ .reflection-content:before {
  transform: translateY(5%);
}
.reflection-container .reflection-grid-cell-41 {
  top: 40%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-41:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-41:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-42 {
  top: 40%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-42:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-42:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-43 {
  top: 40%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-43:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-43:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-44 {
  top: 40%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-44:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-44:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-45 {
  top: 40%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-45:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-45:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-46 {
  top: 40%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-46:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-46:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-47 {
  top: 40%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-47:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-47:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-48 {
  top: 40%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-48:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-48:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-49 {
  top: 40%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-49:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-49:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-50 {
  top: 40%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-50:hover ~ .reflection-content {
  transform: rotateX(0deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-50:hover ~ .reflection-content:before {
  transform: translateY(0%);
}
.reflection-container .reflection-grid-cell-51 {
  top: 50%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-51:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-51:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-52 {
  top: 50%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-52:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-52:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-53 {
  top: 50%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-53:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-53:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-54 {
  top: 50%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-54:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-54:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-55 {
  top: 50%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-55:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-55:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-56 {
  top: 50%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-56:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-56:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-57 {
  top: 50%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-57:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-57:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-58 {
  top: 50%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-58:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-58:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-59 {
  top: 50%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-59:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-59:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-60 {
  top: 50%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-60:hover ~ .reflection-content {
  transform: rotateX(-5deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-60:hover ~ .reflection-content:before {
  transform: translateY(-5%);
}
.reflection-container .reflection-grid-cell-61 {
  top: 60%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-61:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-61:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-62 {
  top: 60%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-62:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-62:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-63 {
  top: 60%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-63:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-63:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-64 {
  top: 60%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-64:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-64:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-65 {
  top: 60%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-65:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-65:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-66 {
  top: 60%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-66:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-66:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-67 {
  top: 60%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-67:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-67:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-68 {
  top: 60%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-68:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-68:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-69 {
  top: 60%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-69:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-69:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-70 {
  top: 60%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-70:hover ~ .reflection-content {
  transform: rotateX(-10deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-70:hover ~ .reflection-content:before {
  transform: translateY(-10%);
}
.reflection-container .reflection-grid-cell-71 {
  top: 70%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-71:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-71:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-72 {
  top: 70%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-72:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-72:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-73 {
  top: 70%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-73:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-73:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-74 {
  top: 70%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-74:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-74:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-75 {
  top: 70%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-75:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-75:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-76 {
  top: 70%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-76:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-76:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-77 {
  top: 70%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-77:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-77:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-78 {
  top: 70%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-78:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-78:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-79 {
  top: 70%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-79:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-79:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-80 {
  top: 70%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-80:hover ~ .reflection-content {
  transform: rotateX(-15deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-80:hover ~ .reflection-content:before {
  transform: translateY(-15%);
}
.reflection-container .reflection-grid-cell-81 {
  top: 80%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-81:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-81:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-82 {
  top: 80%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-82:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-82:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-83 {
  top: 80%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-83:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-83:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-84 {
  top: 80%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-84:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-84:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-85 {
  top: 80%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-85:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-85:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-86 {
  top: 80%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-86:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-86:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-87 {
  top: 80%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-87:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-87:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-88 {
  top: 80%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-88:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-88:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-89 {
  top: 80%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-89:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-89:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-90 {
  top: 80%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-90:hover ~ .reflection-content {
  transform: rotateX(-20deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-90:hover ~ .reflection-content:before {
  transform: translateY(-20%);
}
.reflection-container .reflection-grid-cell-91 {
  top: 90%;
  left: 0%;
}
.reflection-container .reflection-grid-cell-91:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(-20deg);
}
.reflection-container .reflection-grid-cell-91:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-92 {
  top: 90%;
  left: 10%;
}
.reflection-container .reflection-grid-cell-92:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(-15deg);
}
.reflection-container .reflection-grid-cell-92:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-93 {
  top: 90%;
  left: 20%;
}
.reflection-container .reflection-grid-cell-93:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(-10deg);
}
.reflection-container .reflection-grid-cell-93:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-94 {
  top: 90%;
  left: 30%;
}
.reflection-container .reflection-grid-cell-94:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(-5deg);
}
.reflection-container .reflection-grid-cell-94:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-95 {
  top: 90%;
  left: 40%;
}
.reflection-container .reflection-grid-cell-95:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(0deg);
}
.reflection-container .reflection-grid-cell-95:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-96 {
  top: 90%;
  left: 50%;
}
.reflection-container .reflection-grid-cell-96:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(5deg);
}
.reflection-container .reflection-grid-cell-96:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-97 {
  top: 90%;
  left: 60%;
}
.reflection-container .reflection-grid-cell-97:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(10deg);
}
.reflection-container .reflection-grid-cell-97:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-98 {
  top: 90%;
  left: 70%;
}
.reflection-container .reflection-grid-cell-98:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(15deg);
}
.reflection-container .reflection-grid-cell-98:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-99 {
  top: 90%;
  left: 80%;
}
.reflection-container .reflection-grid-cell-99:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(20deg);
}
.reflection-container .reflection-grid-cell-99:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
.reflection-container .reflection-grid-cell-100 {
  top: 90%;
  left: 90%;
}
.reflection-container .reflection-grid-cell-100:hover ~ .reflection-content {
  transform: rotateX(-25deg) rotateY(25deg);
}
.reflection-container .reflection-grid-cell-100:hover ~ .reflection-content:before {
  transform: translateY(-25%);
}
</style>
</head>
<body>
  <div class='reflection-container'>
  <a class='reflection-grid-cell reflection-grid-cell-1' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-2' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-3' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-4' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-5' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-6' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-7' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-8' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-9' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-10' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-11' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-12' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-13' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-14' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-15' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-16' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-17' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-18' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-19' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-20' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-21' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-22' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-23' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-24' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-25' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-26' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-27' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-28' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-29' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-30' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-31' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-32' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-33' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-34' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-35' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-36' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-37' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-38' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-39' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-40' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-41' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-42' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-43' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-44' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-45' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-46' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-47' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-48' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-49' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-50' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-51' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-52' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-53' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-54' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-55' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-56' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-57' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-58' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-59' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-60' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-61' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-62' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-63' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-64' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-65' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-66' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-67' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-68' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-69' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-70' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-71' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-72' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-73' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-74' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-75' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-76' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-77' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-78' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-79' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-80' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-81' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-82' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-83' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-84' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-85' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-86' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-87' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-88' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-89' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-90' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-91' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-92' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-93' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-94' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-95' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-96' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-97' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-98' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-99' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-100' href='#'></a>
  <div class='reflection-content'></div>
</div>
</body>
</html>

5. Rotating 3D Image Cube with CSS

Made by TJ Egan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
  box-sizing: border-box;
  transition: 0.3s;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.scene {
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: url("https://i.imgur.com/2WQui47.jpg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.scene:hover {
  transform: scale(1.5);
}
.scene:hover .side {
  opacity: 1;
}

.cube {
  transform-style: preserve-3d;
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-animation: rotate 10s ease-in-out infinite;
          animation: rotate 10s ease-in-out infinite;
  transform-origin: center center;
}

.side {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #333;
  opacity: 0.95;
  background-size: cover;
  background-repeat: no-repeat;
}

.back {
  transform: translateZ(-150px) rotateX(180deg);
  background-image: url(https://source.unsplash.com/featured/?nature);
}

.left {
  transform: translateX(-150px) rotateY(90deg);
  background-image: url(https://source.unsplash.com/featured/?tree);
}

.right {
  transform: translateX(150px) rotateY(90deg);
  background-image: url(https://source.unsplash.com/featured/?home);
}

.top {
  transform: translateY(-150px) rotateX(90deg);
  background-image: url(https://source.unsplash.com/featured/?car);
}

.bottom {
  transform: translateY(150px) rotateX(270deg);
  background-image: url(https://source.unsplash.com/featured/?work);
}

.front {
  transform: translateZ(150px);
  background-image: url(https://source.unsplash.com/featured/?);
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateX(0);
  }
  12.5% {
    transform: rotateY(90deg);
  }
  25% {
    transform: rotateY(270deg);
  }
  37.5% {
    transform: rotateY(270deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  62.5% {
    transform: rotateX(90deg);
  }
  75% {
    transform: rotateX(180deg);
  }
  87.5% {
    transform: rotateX(270deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0);
  }
  12.5% {
    transform: rotateY(90deg);
  }
  25% {
    transform: rotateY(270deg);
  }
  37.5% {
    transform: rotateY(270deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  62.5% {
    transform: rotateX(90deg);
  }
  75% {
    transform: rotateX(180deg);
  }
  87.5% {
    transform: rotateX(270deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
</style>
</head>
<body>
  <div class="scene">
  <div class="cube">
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side front"></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script>
</body>
</html>

6. CSS 3D Image Hover Effects | 3D Flip Card Effect On Hover

Made by Okba Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap');
*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
	user-select:none;
}
body{
	background-color:#fff;
	width:100%;
	min-height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}
.card{
	position:relative;
	width:280px;
	height:350px;
	perspective:1000px;
	transform-style:preserve-3d;
	cursor:pointer;
}
.card .box{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	transition:1s;
}
.card .front,
.card .back{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.card .front{
	background-image:url(https://1.bp.blogspot.com/-FQQE-TAAaNg/Xx82F7O9mUI/AAAAAAAAAME/VSGCG-1S8RcnUJnryWfvWeVrQwOLXK0tgCNcBGAsYHQ/s2048/image18.jpg);
	background-size:100% 100%;
}
.card .back{
	background-color:rgba(0,0,0,.8);
	transform:rotateY(180deg);
	transform-style:preserve-3d;
}
.card .back .content{
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	position:absolute;
	top:15%;
	left:0px;
	padding:10px;
	color:#fff;
	transform:translateZ(100px);
	width:100%;
}
.card:hover .box{
	transform:rotateY(180deg);
}
</style>
</head>
<body>
	<div class='card'>
		<div class='box'>
			<div class="front"></div>
			<div class="back">
				<div class="content">
					<h3>This Is Title Article</h3>
					<p>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry.
					</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

7. 3d image roulette (pure CSS)

Made by Amit Sheen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
* {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
    position: relative;
    background: #333;
    min-height: 100vh;
    color: #fff;
}
.cont {
    position: absolute;
    top: 50%;
    left: 50%;  
    transform: translate(-50%, -50%);
    width: 520px;
    height: 280px;
    perspective: 750px;
    perspective-origin: center;
    transform-style: preserve-3d;
}

.Face:nth-child(1) { --startAngle: 0deg; background: url('https://picsum.photos/450/150/?random'); }
.Face:nth-child(2) { --startAngle: 45deg; background: url('https://picsum.photos/450/151/?random'); }
.Face:nth-child(3) { --startAngle: 90deg; background: url('https://picsum.photos/450/152/?random'); }
.Face:nth-child(4) { --startAngle: 135deg; background: url('https://picsum.photos/450/153/?random'); }
.Face:nth-child(5) { --startAngle: 180deg; background: url('https://picsum.photos/450/154/?random'); }
.Face:nth-child(6) { --startAngle: 225deg; background: url('https://picsum.photos/450/155/?random'); }
.Face:nth-child(7) { --startAngle: 270deg; background: url('https://picsum.photos/450/156/?random'); }
.Face:nth-child(8) { --startAngle: 315deg; background: url('https://picsum.photos/450/157/?random'); }

.l .Face { --left: 153px; --speed: 5s; background-position: -300px 0; border-color: #500; }
.m .Face { --left: 0px; --speed: 7s; background-position: -150px 0; border-color: #050; }
.r .Face { --left: -153px; --speed: 6s; background-position: 0px 0; border-color: #005; }

.Face {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 100px;
    background-size: 450px 150px;
    border: solid 3px;
    backface-visibility: hidden;
    animation: rotate var(--speed) ease-in-out infinite alternate forwards;
}

@keyframes rotate {
    from { transform: translate(-50%, -50%) rotateX(var(--startAngle)) translate3d(var(--left), 0, 125px); }
    to { transform: translate(-50%, -50%) rotateX(calc(var(--startAngle) + 720deg)) translate3d(var(--left), 0, 125px); }
}
</style>
</head>
<body>
  <div class="cont">
    <div class="r">
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
    </div>

    <div class="m">
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
    </div>
    
    <div class="l">
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
        <div class="Face"></div>
    </div>

</div> 
  <script src='https://amitsh.com/site/Codepen/Top.php?Fill=eeeeee'></script>
</body>
</html>

8. 3D CSS Image Gallery

Made by Muhammed Fathi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
body {
  font-family: "Titillium Web", sans-serif;
  color: white;
  background: linear-gradient(to left, #ffc3a0, #ffafbd);
}

h1 {
  text-transform: uppercase;
  font-size: 4em;
}

img {
  height: 300px;
}

.cardholder {
  margin-top: 150px;
  perspective: 600px;
}
.cardholder .card {
  width: 300px;
  height: 300px;
  background-color: transparent;
  transform: rotateY(50deg);
  box-shadow: -6px 5px 13px 2px rgba(0, 0, 0, 0.25);
  transition: all 1s ease;
  color: transparent;
}
.cardholder .card:hover {
  width: 300px;
  height: 300px;
  background-color: transparent;
  transform: rotateY(0deg);
  box-shadow: 0px 0px 36px 2px rgba(0, 0, 0, 0.25);
  color: black;
}
.cardholder .card:hover p {
  background-color: white;
}
.cardholder .card:hover p.desc {
  z-index: 999;
  position: absolute;
  top: 10px;
  padding: 10px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
          <img src="https://webdevtrick.com/wp-content/uploads/image-slider1.jpg" />
			<p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
           <img src="https://webdevtrick.com/wp-content/uploads/image-slider2.jpg" />
          <p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
          <img src="https://webdevtrick.com/wp-content/uploads/image-slider3.jpg" />
			<p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="cardholder">
        <div class="card">
          <img src="https://webdevtrick.com/wp-content/uploads/image-slider4.jpg" />
			<p class="desc">3D CSS Image Gallery </p>
        </div>
      </div>
    </div>
    
    
  </div>
</div>
</body>
</html>

9. CSS – 3D image

Made by Angelo Palmieri. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
	background: white;
}

img {
	width: 300px;
	height: 300px;
}

.container {
	perspective: 10000px;
  margin: 150px auto;
}

.cube {
	transform-style: preserve-3d;
	height: 150px;
	width: 100px;
	position: relative;
	margin: initial;
	margin: 50px auto;
}

.cube1 {
	transform: rotateX(-48deg) rotateY(26deg) rotateZ(20deg);
}

.cube2 {
	transform: rotateX(-130deg) rotateY(-18deg) rotateZ(-63deg) translateX(-332px) translateY(34px) translateZ(213px);
}

.cube3 {
	transform: rotateX(-10deg) rotateY(-58deg) rotateZ(122deg) translateX(-159px) translateY(73px) translateZ(-8px);
}

.cube div {
	position: absolute;
	border: 6px solid white;
	/* opacity: 0.95; */
	/*	width: 100px;
	height: 100px;*/
	background: black;
}

.front {
	width: 65px;
	height: 180px;
	transform: translateZ(150px);
}

.back {
	width: 65px;
	height: 180px;
	transform: translateZ(-150px);
}

.top {
	width: 65px;
	height: 290px;
	transform: rotateX(90deg) translateZ(150px);
}

.bottom {
	width: 65px;
	height: 290px;
	background: lightgreen;
	transform: rotateX(90deg) translateZ(-40px);
}

.left {
	width: 290px;
	height: 180px;
	transform: rotateY(90deg) translateZ(-150px);
}

.right {
	width: 290px;
	height: 180px;
	transform: rotateY(90deg) translateZ(-74px);
}

.cube3 .left {
	-webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 34% 46%, 60% 45%, 88% 94%, 99% 94%, 100% 0%);
	clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 34% 46%, 60% 45%, 89% 96%, 99% 96%, 99% 0%);
}
</style>
</head>
<body>
  <div class="container">
		<div class="cube cube1">
			<div class="front">front</div>
			<div class="back">back</div>
			<div class="top">top</div>
			<div class="bottom">bottom</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>

		<div class="cube cube2">
			<div class="front">front</div>
			<div class="back">back</div>
			<div class="top">top</div>
			<div class="bottom">bottom</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>

		<div class="cube cube3">
			<div class="front">front</div>
			<div class="back">back</div>
			<div class="top">top</div>
			<div class="left">left</div>
		</div>

	</div>
</body>
</html>

10. css 3D Image card

Made by priyan Darshana. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> 
<style>
.container{
	text-align:center;
	position:relative;
	margin-top:300px;
	transform:skewY(-20deg);
	
}

body{
	display:flex;
	justify-content:center;
	align-items:center;
	background:#111;
	flex-direction:column;
	overflow-x:hidden;
}

.container .pd-img-box {
	position:relative;
	transform-origin:bottom;
	transform:skewX(45deg);
	width:100%;
	height:180px;
		
}

.container .pd-img-box img{
	position:absolute;
	bottom:0;
	left:15%;
	max-width:100%;
	transition:0.5s;
	
}

.container .pd-img-box:hover img:nth-child(3){
	transform:translate(100px, -100px);
}

.container .pd-img-box:hover img:nth-child(2){
	transform:translate(50px, -50px);
	opacity:0.5;
}

.container .pd-img-box:hover img:nth-child(1){
	transform:translate(0px, 0px);
	opacity:0.1;
}
.container h2{
	color:#fff;
	font-size:50px;
	text-transform:uppercase;
}
.container .pd-skew{
	color:#fff;
	transform-origin:top;
	transform:skew(45deg);
	max-width:50%;
	margin:0 auto;
	text-align:justify;
	
}

.container a{
/* 	transform:skewX(-45deg); */
	color:white;
	border:1px solid white;
	padding:10px;
	transform-origin:top;
	background:transparent;
	display:inline-block;
	transition:0.5s;
	
	
}

.container a:hover{
	text-decoration:none;
	transition:0.5s;
	color:black;
	background:white;
	
}
</style>
</head>
<body>
  <div class="container">
	<div class="pd-img-box">
			<img src="https://covertimeline.com/app/template/25.jpg">
			<img src="https://covertimeline.com/app/template/25.jpg">
			<img src="https://covertimeline.com/app/template/25.jpg">
	</div>
	
	<h2>Priyan Designs</h2>
	<div class="pd-skew">
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente dolore labore vero inventore non accusantium, omnis enim deserunt vel beatae, itaque sint facere dicta dolorem culpa voluptate, nesciunt molestias fuga.
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente dolore labore vero inventore non accusantium, omnis enim deserunt vel beatae, itaque sint facere dicta dolorem culpa voluptate, nesciunt molestias fuga.
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente dolore labore vero inventore non accusantium, omnis enim deserunt vel beatae, itaque sint facere dicta dolorem culpa voluptate, nesciunt molestias fuga.</p>
	</div>
	<a href="">Read More</a>
	</div>
</body>
</html>

11. 3d Image Stack like Gallery

Made by Rahul. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{
  background: linear-gradient(to left,#808080,#B2B2B2);
  font-family: 'Hammersmith One', sans-serif;
}

.frame{
  width:640px;
  height:320px;
  position:absolute;
  margin-left:20%;
  margin-top:15%;
}

.image{
  position:absolute;
  box-shadow:5px 5px 20px #333333;
  border-radius:4px;
  cursor:pointer;
  opacity:0.7;
  
  transform-origin: 50% 100%;
  transition: 0.5s ease all;
  transform:perspective(500px) rotateX(50deg);
}

.area:hover .image{
  opacity:1;
  transition: 0.5s ease all;
  transform:perspective(500px) rotateX(0deg);
  margin-top:-100px;
  z-index:1;
}

.title{
  width:640px;
  height:50px;
  background:linear-gradient(to right,grey, black);
  position:absolute;
  margin-top:320px;
  z-index:1;
  opacity:0;
  
  transition: 0.5s ease all;
}

.frame:hover .title{
  opacity:0.5;
  box-shadow:0px -5px 5px black;
  
  transition: 1s ease all;
}

.text{
  color:white;
  font-size:2em;
  margin-left:20%;
  margin-top:325px;
  position:absolute;
  opacity:0;
  z-index:1;
  text-transform: uppercase;
  
  transition: 1s ease all;
}

.frame:hover .text{
  opacity:0.8;
  
  transition: 1s ease all;
}

.area{
  width:640px;
  height:64px;
  position:absolute;
}

.on{
  margin-top:260px;
}

.tw{
  margin-top:195px;
}

.th{
  margin-top:130px
}

.fo{
  margin-top:65px
}

.fi{
  margin-top:0px
}

.image{
  margin-top:-260px;
}
</style>
</head>
<body>
  <!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>

<!-- Main Body -->
<div class="frame">
  
  <!-- Famous Stack of Images-->
  <div class="area on">
    <img class="image one" src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
  </div>
  
  <div class="area tw">
    <img class="image two" src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
  </div>
  
  <div class="area th">
    <img class="image three" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
  </div>
  
  <div class="area fo">
    <img class="image four" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
  </div>
  
  <div class="area fi">
    <img class="image five" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
  </div>  

  <div class="title"></div>
  <header class="text">Pixar - The Hall of Fame</header>
  
</div>
</body>
</html>