How to make a three-dimensional effect with CSS3 shadow effect

two CSS3 properties used: Box-shadow, transform, basic syntax:

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.

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.
Because CSS3 is still a draft, the latest version of the existing browser is to support transform with a private attribute, need to add-webkit-、-moz-、-o-、-ms-

Concrete implementation of the idea: in order to highlight the three-dimensional, to let the shadow around the middle light, here used:: Before,::after pseudo-elements, create and let them positioned after the #demo element (z-index:-1), while setting the shadow, and set the rotation, the idea with a picture to represent this:

This is the effect we want, the specific code to see:

Css

 #demo {display:inline-block; position:relative; margin:50px; padding:20px; background: #fafafa; box-shadow:0 0 3px rgba (0, 0, 0, 0.2); -moz-border-radius:4px; border-radius:4px; Color:rgba (0,0,0, 0.8); text-shadow:0 1px 0 #fff;} #demo:: Before, #demo:: after{position:absolute; content: ""; top:10px; bottom:15px; left:10px; width:50%; box-shadow:0 15px 10px rgba (0, 0, 0, 0.5); -webkit-transform:rotate ( -3DEG); -moz-transform:rotate ( -3DEG); -o-transform:rotate ( -3DEG); -ms-transform:rotate ( -3DEG); Transform:rotate ( -3DEG); Z-index:-1;} #demo:: after{right:10px; left:auto;-webkit-transform:rotate (3deg);-moz-transform:rotate (3deg);-o-transform:  Rotate (3deg);  -ms-transform:rotate (3DEG); Transform:rotate (3DEG); } #demo img{vertical-align:bottom;} 

Html

<p id= "Demo" >    </p>