css3倒影属性 box-reflect

谷歌兼容

CSS代码：

.reflect-below-p {
    padding-bottom: 176px;
}
.reflect-below {
    -webkit-box-reflect: below;
}
.reflect-right {
    -webkit-box-reflect: right;
}
.reflect-right-translate {
    -webkit-box-reflect: right 10px;
}
.reflect-below-mask {
    -webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
.reflect-below-img {
    -webkit-box-reflect: below 0 url(shuai2.png);
}

HTML代码：

<strong>下倒影</strong>
<p class="reflect-below-p"><img src="chaowei.jpg" class="reflect-below"></p>


<strong>右倒影</strong>
<p><img src="chaowei.jpg" class="reflect-right"></p>
<strong>右倒影同时有偏移</strong>
<p><img src="chaowei.jpg" class="reflect-right-translate"></p>


<strong>下倒影同时有遮罩（线性渐变）</strong>
<p class="reflect-below-p"><img src="chaowei.jpg" class="reflect-below-mask"></p>


<strong>下倒影同时有遮罩（使用png图片）</strong>
<p class="reflect-below-p"><img src="chaowei.jpg" class="reflect-below-img"></p>

火狐兼容

CSS代码：

.reflect-below-mask {
    -webkit-box-reflect: below 0 linear-gradient(transparent, white);    
}
.element-reflect-below {
    width: 150px; height: 176px;
    background: -moz-element(#reflect);
    transform: scaleY(-1);
}
.element-reflect-below:before {
    content: '';
    display: block;
    height: 100%;
    background-image: linear-gradient(to top, hsla(0,0%,100%,0), white);
}

.spin {
    animation: spin 3s infinite linear;
}
@keyframes spin {
    form { transform: rotate(0); }    
    to { transform: rotate(360deg); }    
}

HTML代码：

<p><strong>下倒影同时有遮罩（线性渐变）</strong></p>
<div id="reflect" class="wrap"><img src="chaowei.jpg" class="reflect-below-mask"></div>
<div class="element-reflect-below"></div>
<p><button id="button">图片转起来</button></p>

 IE兼容

HTML代码：

<svg width="150" height="352">
  <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#fff" stop-opacity="0"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="1"/>
    </linearGradient>
    <mask id="mask">
      <rect x="0" y="176" width="150" height="177" fill="url(#gradient)"  />
    </mask>
    <pattern id="reflect" patternUnits="userSpaceOnUse" width="150" height="176">
      <image xlink:href="chaowei.jpg" width="150" height="176" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="150" height="176" fill="url(#reflect)"></rect>
  <rect x="0" y="176" width="150" height="176" fill="url(#reflect)" mask="url(#mask)" transform="translate(75 264) scale(1, -1) translate(-75 -264)"></rect>
</svg>

具体查看：http://www.zhangxinxu.com/wordpress/2016/08/webkit-box-reflect-moz-element/