Membuat text cermin dengan css

code html :

<h1 class="reflected">Reflected Text!</h1>

code css :
   

.reflected {
    position: relative;
}
.reflected:before, .reflected:after {
    display: block;
    position: absolute;
    bottom: -.8em;
    left: 0;
    right: 0;
}
.reflected:before {
    content: 'Reflected Text!';
    opacity: .3;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
}
.reflected:after {   
    background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));

    content: ' ';
    height: 1em;
}