Sunday, August 28, 2016

Flip image via Javascript/CSS?

This is how image can be flipped, like a mirror image

<div id="container" class="flip-vertical">
<h3 class="flip-vertical">vertical flip</h3>
</div>

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

No comments:

Post a Comment