CSS3 transform implements image projection,
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> image projection effect </title>
<Style>
. Box {
Position: absolute;
Padding: 2px;
Background: white;
-Webkit-box-shadow: 1px 2px 4px rgba (0, 0,. 5 );
-Moz-box-shadow: 1px 2px 4px rgba (0, 0,. 5 );
Box-shadow: 1px 2px 4px rgba (0, 0,. 5 );
}
. Box img {
Display: block;
Width: 200px;
Height: 220px;
Border: 1px inset #8a4419;
Background: # eee;
}
. Box: after {
Content :'';
-Webkit-box-shadow: 100px 0 10px rgba (0, 0,. 2 );
-Moz-box-shadow: 100px 0 10px rgba (0, 0,. 2 );
Box-shadow: 100px 0 10px rgba (0, 0,. 2 );
Position: absolute;
Width: 50%;
Height: 80px;
Bottom: 0;
Right: 65px;
Z-index:-1;
-Webkit-transform: skew (-40deg );
-Moz-transform: skew (-40deg );
-O-transform: skew (-40deg );
Transform: skew (-40deg );
}
</Style>
</Head>
<Body>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
<Div class = "box"> </div>
</Body>
</Html>