Realization of Super Stereo 3D image rollover tilt effect with pure CSS3

I was in the jquery forum to see a user to share a CSS3 3D image rollover tilt effect, it is very good, in fact, the word back, the realization of this thing is really very simple, mainly creative good. Take a look at the effect chart first.

How, looks pretty good, tilt, shadow, let a very ordinary picture become so domineering.

In addition, you can also view the demo demo here, the mouse over the picture will appear this effect.

So let's analyze the source code, display HTML, very simple:

<div onclick= "" >
  <figure>
    <figcaption>autumn by Lucien Agasse</figcaption>
  </figure>
</div>

Here we use the HTML5 Figure label to show the illustrations, nothing special.

Then the CSS code:

Figure {  margin:0   width:100%   HEIGHT:29.5VW;   Background:url ("winter-hat.jpg");  &n 
bsp;  background-size:100%;
    Transform-origin:center Bottom;
    transform-style:preserve-3d;
    Transition:1s Transform; &NBSP} figure figcaption {  width:100%   background:linear-gradient (rgba (0, 0, 0, 0.4), Rgba (0, 0, 0, 0.4)
),         url ("winter-hat.jpg");     background-size:100%;
height:50px;
    background-repeat:no-repeat;
  Background-position:bottom; 
  Color: #fff;     position:relative;
TOP:29.5VW;
    Transform-origin:center top;
    Transform:rotatex ( -89.9DEG);
    FONT-SIZE:1.2VW;
  Font-family:montserrat, Arial, Sans-serif;
  Text-align:center;
    Line-height:3;
} figure:before {  content: "";   Position:absolute; top:0;
left:0;   width:100%;
height:100%;
    box-shadow:0 0 100px 50px rgba (0, 0, 0, 0.1), inset 0 0 250px 250px rgba (0, 0, 0, 0.1);
    transition:1s;
    Transform:rotatex (95deg) Translatez ( -80px) scale (0.75);
    Transform-origin:inherit; }

Here we define the figure background image, which is the image we want to achieve the 3d effect. At the same time also defines the picture description information style, so that the picture after the rollover more highlight the stereo effect.

Then there is the animation effect of the mouse slipping:

Div:hover Figure { 
Transform:rotatex (75deg) Translatez (5VW); 
}
Div:hover Figure:before {
box-shadow:0 0 25px 25px rgba (0, 0, 0, 0.5), inset 0 0 250px 250px rgba (0, 0, 0, 0.5);    c5/> Transform:rotatex ( -5deg) Translatez ( -80px) scale (1);
@media screen and

(max-width:800px) {
div {width:50%} 
Figure {HEIGHT:45VW;} 
Figure Figcaption { 
top:45vw;
FONT-SIZE:2VW;
} 
@media screen and

(max-width:500px) {
div { 
width:80%; 
Margin-top:1rem; 
} 
Figure { 
height:70vw;
} 
Figure figcaption { 
top:70vw;
FONT-SIZE:3VW;
} 
}

It is easy to see the use of the CSS3 transform properties, where Rotatex to flip, Translatez to achieve the z-axis 3D conversion, the idea is very clear.

Finally, share the source code, download the address >>