Flip & Mirror Image With jQuery And CSS3 Transforms - imgFlip

The jQuery imgFlip plugin enables you to flip & mirror images horizontally and/or vertically using CSS3 transforms (for modern browsers) and CSS filters (for legacy browsers).

Cross-browser and fully responsive.

How to use it:

1. Load the Material Design Iconic Fonts for the flip icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

2. Load jQuery JavaScript library and the jQuery imgFlip plugin's files.

<link href="css/imgflip.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery.imgflip.js"></script>

3. Insert your image into a container element.

<div class="img-container">
  <img src="https://picsum.photos/1200/900/?random">
</div>

4. Call the imgFlip plugin on the container element and done.

$(function(){

  $(".img-container").imgFlip();

});

5. Enable/disable the vertical/horizontal flipping.

$(".img-container").imgFlip({
  flipVertical: true,
  flipHorizontal : true
});

6. Decide whether to show the status bar.

$(".img-container").imgFlip({
  showStatus: true,
  hStatus: "You are Viewing Horizontally Mirror Image", 
  vStatus: "You are Viewing Vertically Flipped Scene"
});

---

This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.