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:wght@700&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>