This is a simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid when hovering over it. The CSS includes a shadow effect to make this action more realistic.
A Pen by Iván Melgrati on CodePen.
This is a simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid when hovering over it. The CSS includes a shadow effect to make this action more realistic.
A Pen by Iván Melgrati on CodePen.
<div class="gallery-container"> | |
<div class="gallery-picture"> | |
<div class="thumb"> | |
<a href="#" class="pic1"> | |
<span>3D - Picture 1</span> </a> </div> | |
</div> | |
<div class="gallery-picture"> | |
<div class="thumb"> | |
<a href="#" class="pic2"> | |
<span>3D - Picture 2</span> </a> </div> | |
</div> | |
<div class="gallery-picture"> | |
<div class="thumb"> | |
<a href="#" class="pic3"> | |
<span>3D - Picture 3</span> </a> </div> | |
</div> | |
<div class="gallery-picture"> | |
<div class="thumb"> | |
<a href="#" class="pic4"> | |
<span>3D - Picture 4</span> </a> </div> | |
</div> | |
</div> |
@charset "utf-8"; | |
/* Delete all margins and paddings from Gallery items */ | |
.gallery-container * { | |
margin: 0; | |
padding: 0; | |
} | |
/* Picture container */ | |
.gallery-picture { | |
box-sizing: border-box; | |
display: inline-block; | |
margin-bottom: 75px; | |
min-width: 300px; | |
width: 24%; | |
} | |
/* Picture size and layout */ | |
.thumb { | |
width: 100%; | |
height: 225px; | |
margin: 0 auto; | |
perspective: 1000px; | |
} | |
.thumb a { | |
display: block; | |
width: 100%; | |
height: 100%; | |
background-size: 0, cover; | |
transform-style: preserve-3d; | |
transition: all 0.5s; | |
transform: rotateX(80deg); | |
transform-origin: bottom; | |
border: none; | |
outline: none; | |
background-repeat: no-repeat; | |
background-position: center center; | |
} | |
.thumb a.pic1 { | |
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://imelgrat.me/demo/images/3d-reveal-picture-1.jpg"); | |
} | |
.thumb a.pic2 { | |
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://imelgrat.me/demo/images/3d-reveal-picture-2.jpg"); | |
} | |
.thumb a.pic3 { | |
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://imelgrat.me/demo/images/3d-reveal-picture-3.jpg"); | |
} | |
.thumb a.pic4 { | |
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://imelgrat.me/demo/images/3d-reveal-picture-4.jpg"); | |
} | |
.thumb:hover a,.thumb:focus a,.thumb:active a { | |
transform: rotateX(0deg); | |
transform-origin: bottom; | |
} | |
/* Bottom side */ | |
.thumb a:after { | |
content: ''; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
height: 30px; | |
background: inherit; | |
background-size: cover, cover; | |
background-position: bottom; | |
transform: rotateX(90deg); | |
transform-origin: bottom; | |
} | |
/* Picture caption style*/ | |
.thumb a span { | |
color: white; | |
text-transform: uppercase; | |
position: absolute; | |
top: 100%; | |
left: 0; | |
width: 100%; | |
font: bold 12px/30px Ubuntu; | |
text-align: center; | |
transform: rotateX(-89.99deg); | |
transform-origin: top; | |
z-index: 1; | |
} | |
/* Picture shadow */ | |
.thumb a:before { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0, 0, 0, 0.5); | |
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); | |
transition: all 0.5s; | |
opacity: 0.15; | |
transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
transform-origin: bottom; | |
opacity: 1; | |
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); | |
transform: rotateX(0) translateZ(-60px) scale(0.85); | |
} |