Use pure CSS3 to achieve ultra-Three-dimensional 3D image rollover

In the morning, I saw a CSS 3 3D image side flip and tilt special effect shared by netizens on the jQuery forum. I think the effect is very good. In fact, the implementation of this stuff is really simple, the main idea is good. Let's take a look.

How? It looks pretty good. It's skewed and shadow, making a very common image so domineering.

Next, let's analyze the source code and display the html code, which is very simple:

Autumn, by Lucien Agasse

Here, the figure label of HTML5 is used to represent illustrations, which is nothing special.

Then there is the CSS code:

{:;:;:;:;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:; :;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:;}

Here we define the background image of figure, that is, the image we want to implement 3d effects. At the same time, the description style of the image is also defined, so that the three-dimensional effect is more prominent after the image is rolled over.

The following is the animation effect of the mouse sliding:

{:;}{:;:;}{:;}{:;}{:;:;}{:;:;}{:;}{:;:;}

It is easy to see that the transform attribute of css3 is used here, where rotateX is used to flip and translateZ is used to realize the 3D conversion of the Z axis. The idea is very clear.

Finally, share the source code,>