Flip & Mirror Image With jQuery And CSS3 Transforms - imgFlip

File Size: 324 KB
Views Total: 2602
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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">

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




5. Enable/disable the vertical/horizontal flipping.

  flipVertical: true,
  flipHorizontal : true

6. Decide whether to show the status bar.

  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.