Mirror Characters, Text, And Images In jQuery - mirror.js

mirror.js is a small jQuery plugin (jQuery UI widget) that applies mirror and reflection effects characters, text, and/or images using CSS3 transforms.

How to use it:

1. Include the necessary jQuery and jQuery UI libraries on the web page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Place the JavaScript file mirror.js after jQuery.

<script src="mirror.js"></script>

3. Call the plugin to mirror your text and images in the document.

<p class="example">
  <span>Left-aligned text becomes right-aligned.</span>
</p>

<div class="example">
  <img src="https://picsum.photos/200/300/?random">
</div>

...

$(function(){

  $('.example').mirror();

});

4. Mirror the characters instead of the whole text.

$(function(){

  $('.example').mirror({
    char: true
  });

});

5. Apply a reflection effect to the mirrored text/image.

$(function(){

  $('.example').mirror({
    horizontal: false
    vertical: true
  });

});

---

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