<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Image Projection Effects </title>
<style>
. box {
Position:absolute;
padding:2px;
Background:white;
-webkit-box-shadow:1px 2px 4px Rgba (0,0,0,.5);
-moz-box-shadow:1px 2px 4px Rgba (0,0,0,.5);
box-shadow:1px 2px 4px Rgba (0,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,0,.2);
-moz-box-shadow:100px 0 10px Rgba (0,0,0,.2);
box-shadow:100px 0 10px Rgba (0,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>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div class= "box" ></div>
</body>
CSS3 transform to achieve picture projection effect