css3图片倒影
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .container{ 8 position: relative; 9 } 10 .mask{ 11 position: absolute; 12 /*margin:50px;*/ 13 transform-origin: 0 0; 14 transform: rotateX(180deg) rotateZ(-10deg); 15 top:224px; 16 left:-20px; 17 } 18 .mask>div{ 19 position: absolute; 20 top:0; 21 left:0; 22 /*border-radius: 50%;*/ 23 } 24 .mask>div:first-child{ 25 z-index: 1; 26 } 27 .mask>div:last-child{ 28 /*background-color: rgba(255, 255, 255, 0.8);*/ 29 z-index: 9; 30 /*border:1px solid #f00;*/ 31 width:200px; 32 height:112px; 33 background-image: linear-gradient(0deg, rgba(255,255,255,0.85) ,#fff,#fff,#fff); 34 35 } 36 body{ 37 margin:50px; 38 } 39 .img{ 40 transform-origin: 0 100%; 41 transform: rotateZ(-10deg); 42 } 43 .img>img{ 44 /*border-radius:50% ;*/ 45 } 46 </style> 47 </head> 48 <body> 49 50 <div class="container"> 51 <div class="img"><img src="images/1.jpg" alt=""/></div> 52 <div class="mask"> 53 <div><img src="images/1.jpg" alt=""/></div> 54 <div></div> 55 </div> 56 </div> 57 </body> 58 </html>
原文：http://www.cnblogs.com/haley168/p/daoying.html