0

How do I mirror text just like iTunes in Firefox? Is there JavaScript that can do this or is it possible with CSS? I'm looking for a true mirror image that I can then manipulate not backwards text.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Middletone
  • 4,190
  • 12
  • 53
  • 74

5 Answers5

4

There's a jQuery plugin that can create that effect: FontEffect

Edit: The original links does not work any more but this seems to be the same plugin (untested...): https://code.google.com/p/clapee-shuffle/source/browse/trunk/Test1/js/jquery-fonteffect-1.0.0.js?r=4

jeroen
  • 91,079
  • 21
  • 114
  • 132
  • @Nordenheim Thanks, I have found a replacement and although it really is not much of an answer, I'll just leave it just in case somebody finds it helpful. – jeroen Mar 10 '15 at 15:30
2

Christian Effenberger's Reflex library provides a nice degradable reflection effect for images, but not for text. Depending on the height of the area you wish to reflect you can use the old technique of creating multiple single-pixel-tall divs with with negative top offsets and copies of the original text. Clunky, but effective.

Duncan Beevers
  • 1,830
  • 11
  • 17
1

CSS transforms or HTML5 Canvas are probably your best bet without getting into Java/Flash: http://webkit.org/blog/130/css-transforms/

Charlie
  • 8,530
  • 2
  • 55
  • 53
1

There's JavaScript code to do it. You could probably look at the code on a site like Flip Text.

And like charlie said, it's basically a conversion - one character matched with another that looks upside down.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
0

I found a hacky solution too: http://snipplr.com/view/4215/flip-your-text-with-charsets/

Charlie
  • 8,530
  • 2
  • 55
  • 53