body { background:#000; } * { margin:0px; } /*wrap start*/ #wrap { width:120px; height:180px; margin:50px auto; position:relative; transform-style:preserve-3D; /*变幻风格为3D*/ /*perspective:800px; 景深*/ transform:perspective(800px) rotateX(-12deg); } #wrap img { position:absolute; top:0; left:0; transform:rotateY(32deg); box-shadow:0px 0px 20px #fff; /*盒阴影 下方 距离7px . 渐变*/ -webkit-box-reflect:below 7px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,1)); /*倒影*/ -moz-box-reflect:below 7px -moz-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,1)); } /*end wrap*/