How to use CSS in the page to make the image have three-dimensional effect? (code measured)

If there is a three-dimensional picture on the page, there will always be a high-tech feeling. In fact, three-dimensional design is not difficult, we can achieve three-dimensional effect through CSS. Very simple to understand, first we can have such a simple idea, in order to highlight the three-dimensional, to let the shadow around the middle light, that is, CSS shadow stereoscopic effect, here is used:: Before,::after pseudo-elements, created and positioned them after the #demo element (z-index:-1), Set the shadow at the same time and set the rotation. This article will give you a detailed introduction of CSS image stereoscopic effect of the implementation.

CSS picture Stereo Effects specific code examples are as follows:

<!     DOCTYPE html>
Effects such as:


Related Property Comments:

First, Box-shadow

box-shadow:5px 2px 6px #000;
Values are left-to-right: Shadow horizontal offset value (positive value right, negative value left), Shadow vertical offset value (positive downward, negative value up), shadow blur value, Shadow color.

Second,transform
The transform has a lot of effects and only rotates here:

Transform:rotate ( -3DEG)
Numeric values represent the angle of rotation, positive values are clockwise, and negative values are counterclockwise.

Hope this article about the three-dimensional effect of CSS pictures to help you!