利用-moz-element()实现倒影效果演示实例页面

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>