Can you use CSS to mirror/flip text?

Question

Is it possible to use CSS/CSS3 to mirror text?

Specifically, I have this scissors char “✂” (✂) that I'd like to display pointing left and not right.

Brood

If the scissors image for some reason doesn't work out for you, I've seen it faked with %< and >% – Joiner

See this thread: #3434141 [1]: #3434141 – Schoenburg

The answer by Micheal is more accurate. Can you please update the correct answer? Because the answer which you've marked as correct is not mirror but rotation by 180 degrees. – Enviable

@PeteWilson, ? Is the ✂ char so common? What's it used for? – Bogie

+5 for nice question – Kimkimball

Be aware that the rotation is different depending on the emoji implementation. On Apples emoji set it’s pointing down. – Susceptible

Answer 1

You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

And a vertical flip would involve scaling the div like this:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

---

DEMO:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>

Manichaeism

It is certainly the nost standards compliant answer, unfortunately we don't live in a world where this actually works for all use cases yet. – Lailaibach

Could you include the actual browser prefixes in your answer, with the non-prefixed last? The CSS as you gave it does not work. – Ayo

@SerranoPereira indeed, thanks for the suggestion. Answer amended. – Manichaeism

This should be the correct answer as it is a real mirror. The chosen answer is only a rotate which in the case of asymmetrical anything will not provide a mirror image. – Magnify

Possible side-note: Also mirrors padding (padding-right: 10px; will show 10px padding on the left), but not margin. – Mckeown

Note that CSS transform doesn't work on inline elements like Foundation's suggested <i> tags, unless you also give then display: inline-block. – Bankrupt

Answer 2

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

The two parameters are X axis, and Y axis, -1 will be a mirror, but you can scale to any size you like to suit your needs. Upside down and backwards would be (-1, -1).

If you're interested in the best option available for cross browser support back in 2011, see my older answer.

Lailaibach

Technically this is not a mirror. its rotated. So it'll only work with some type of elements – Wimbush

I had some issues in Chrome until I added display: inline-block to my span (using pictos fonts) – Flossie

Given that when this question was asked, browser transforms were not widely supported, I would argue that this WAS the right answer. In fact transforms are not supported until IE 9, so I would argue that this is STILL the right answer, for at least a little while longer. – Lailaibach

This answer is wrong, it is not a mirror. It only works in this one case because the symbol given in the example is vertically asymmetrical. – Magnify

Although this is useful in itself, it's not the answer to the exact question asked. I found this question through a search engine because I wanted to flip an image horizontally. It's not symmetrical like the OPs scissors. – Malone

previous comments are no longer relevant since the answer now correctly suggests the use of scale and not rotate(-180deg) – Heartworm

Answer 3

Real mirror:

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

Archer

You should always put the standards-compliant (non-prefixed) property last, so that when the standard is adopted by a browser, it will use the standards-based version instead of the (older, buggier) prefixed version. In this case, that means "transform: matrix(-1, 0, 0, 1, 0, 0);" should be the last property. (Edited the answer to reflect this.) – Rosabella

I don't know whether this should be on the correct answer or the question but I want to let fontawesome / bootstrap users know about the fa-flip-horizontal and fa-flip-vertical properties – Haskins

Great real answer. However display:block; not necessarily needed. – Cita

yep... display:block; or inline-block is needed – Agnesse

This was really helpful to keep the correct text orientation of an element's backface when rotated along the Y axis. For ex: backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ; – Linseylinseywoolsey

Answer 4

You can user either

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

or

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

Notice that setting position to absolute is very important! If you won't set it, you will need to set display: inline-block;

Stalker

Answer 5

I cobbled together this solution by scouring the Internet including

• Stack Overflow answers,
• MSDN articles,
• http://css-tricks.com/almanac/properties/t/transform/,
• http://caniuse.com/#search=transform,
• http://browserhacks.com/, and
• http://www.useragentman.com/IETransformsTranslator/.

This solution seems to work in all browsers including IE6+, using scale(-1,1) (a proper mirror) and appropriate filter/-ms-filter properties when necessary (IE6-8):

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

Rosabella

Answer 6

There's also the rotateY for a real mirror one:

transform: rotateY(180deg);

Which, perhaps, is even more clear and understandable.

EDIT: Doesn't seem to work on Opera though… sadly. But it works fine on Firefox. I guess it might required to implicitly say that we are doing some kind of translate3d perhaps? Or something like that.

Cassowary

For those wondering this is a 3D transform. I think it is definitely more readable/understandable than the scale and matrix methods given previously. – Magnify

I do not see how a rotation is a mirror - that would only appear to be so in one special case. – Arium

@celsharp it's on the Y axis, so you see the image/element from its back, thus, mirrored. – Cassowary

Answer 7

For cross browser compatibility create this class

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

And add it to your icon class, i.e.

<i class="icon-search mirror-icon"></i>

to get a search icon with the handle on the left

Mankind

Answer 8

you can use 'transform' to achieve this. http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

Tripitaka

I believe this is technically not mirrored (except for some cases only, eg a shape with central symmetry). – Cassowary

Answer 9

Just adding a working demo for horizontal and vertical mirror flip.

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

Chrysanthemum

Answer 10

That works fine with font icons like 's7 stroke icons' and 'font-awesome':

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

And then on target element:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>

Desireah

Answer 11

Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

Zamir

Answer 12

You could try box-reflect

box-reflect: 20px right;

see CSS property box-reflect compatibility? for more details

Rochdale

box-reflect is a webkit only property. but i dont think it has a -moz- equivalent.. Check this post.. – Navarro

also separator should be : not ; – Navarro

Answer 13

We can make pretty cool text effects using very little code, with css keyframes, and its alternate property (try removing alternate to see the difference):

span {
  font-weight: 1000; font-size: 3.3em;
}
small {
  display: inline-block;
  font-size: 2.3em;
  animation: 1s infinite alternate coolrotate
}

@keyframes coolrotate {
  from {
    transform: scale(1, 1) translate(-0.1em, 0)
  }
  to {
    transform: scale(-1, 1) translate(0, 0)
  }
}

<span>
  <span>c</span>
  <small>o</small>
  <span>o</span>
  <small>L</small>
  <small>...</small>
</span>

Feast

Answer 14

this is what worked for me for <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

just need display:inline-block or block to rotate. So basically first answer is good. But -180 didn't worked.

Gracielagracile

Answer 15

direction: rtl; is probably what you are looking for.

Demineralize