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.

If the scissors image for some reason doesn't work out for you, I've seen it faked with %< and >% — Pete Wilson, Mar 23 '11 at 14:23
See this thread: http://stackoverflow.com/questions/3433641/flipping-inverting-mirroring-text-using-css-only [1]: http://stackoverflow.com/questions/3433641/flipping-inverting-mirroring-text-using-css-only — Lucas Vall, Jul 24 '13 at 08:37
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. — Sanket Sahu, Dec 18 '13 at 14:47
@PeteWilson, ? Is the ✂ char so common? What's it used for? — Pacerier, Jun 30 '15 at 07:16
Be aware that the rotation is different depending on the emoji implementation. On Apples emoji set it’s pointing down. — Akkumulator, Dec 29 '17 at 09:56

score 524 · Accepted Answer · edited Jun 04 '19 at 17:30

524

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>

edited Jun 04 '19 at 17:30

Hernán Eche

6,529
12
51
76

answered Mar 23 '11 at 17:40

methodofaction

70,885
21
151
164

1

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. – Chris Sobolewski Oct 20 '13 at 02:10
Could you include the actual browser prefixes in your answer, with the non-prefixed last? The CSS as you gave it does not work. – Serrano Jan 30 '14 at 15:21
@SerranoPereira indeed, thanks for the suggestion. Answer amended. – methodofaction Jan 31 '14 at 21:51
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. – gregtzar Feb 13 '14 at 00:57
Possible side-note: Also mirrors padding (`padding-right: 10px;` will show 10px padding on the left), but not margin. – Marcel Mar 13 '14 at 15:57
14

Note that [CSS transform doesn't work on inline elements](http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements) like Foundation's suggested tags, unless you also give then display: inline-block. – enigment Nov 16 '16 at 01:54

score 71 · Answer 2 · edited May 23 '17 at 11:47

71

-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.

edited May 23 '17 at 11:47

Community

1
1

answered Mar 23 '11 at 14:20

Chris Sobolewski

12,819
12
63
96

22

Technically this is not a mirror. its rotated. So it'll only work with some type of elements – borisrorsvort Jan 16 '13 at 16:28
6

I had some issues in Chrome until I added display: inline-block to my span (using pictos fonts) – Clarence Liu Mar 26 '13 at 21:13
1

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. – Chris Sobolewski Nov 02 '13 at 21:59
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. – gregtzar Feb 13 '14 at 00:58
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. – gillytech Aug 25 '14 at 03:00
previous comments are no longer relevant since the answer now correctly suggests the use of `scale` and not `rotate(-180deg)` – keeri Aug 24 '20 at 14:52

score 68 · Answer 3 · edited Jan 07 '19 at 21:40

68

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>

edited Jan 07 '19 at 21:40

vsync

118,978
58
307
400

answered Jul 12 '12 at 17:16

Cícero Verneck Corrêa

1,345
10
23

17

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.) – Jay Dansand Oct 02 '13 at 16:47
7

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 – lol Jan 05 '14 at 11:25
2

Great real answer. However display:block; not necessarily needed. – Gilly Jan 08 '14 at 07:59
6

yep... display:block; or inline-block is needed – dGo May 04 '15 at 21:10
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) ;``` – parliament Mar 24 '18 at 15:11

score 16 · Answer 4 · answered Sep 12 '17 at 12:45

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;

Jay Dansand · Answer 5 · 2016-02-23T14:53:42.057

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);
}

jeromej · Answer 6 · 2013-05-26T22:58:43.977

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.

edited May 26 '13 at 22:58

answered May 26 '13 at 21:34

jeromej

10,508
2
43
62

1

For those wondering this is a 3D transform. I think it is definitely more readable/understandable than the scale and matrix methods given previously. – gregtzar Feb 13 '14 at 01:02
I do not see how a rotation is a mirror - that would only appear to be so in one special case. – cel sharp Apr 16 '20 at 07:47
@celsharp it's on the Y axis, so you see the image/element from its back, thus, mirrored. – jeromej Apr 16 '20 at 08:20

score 6 · Answer 7 · answered Oct 14 '13 at 14:15

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

score 3 · Answer 8 · answered Mar 01 '17 at 09:45

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>

score 3 · Answer 9 · answered Mar 23 '11 at 14:05

3

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

css:

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

answered Mar 23 '11 at 14:05

Rito

5,117
3
40
37

I believe this is technically not mirrored (except for some cases only, eg a shape with central symmetry). – jeromej Nov 17 '20 at 08:14

Dmitry Anch · Answer 10 · 2020-02-20T13:33:09.870

3

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>

edited Feb 20 '20 at 13:33

answered Feb 20 '20 at 13:26

Dmitry Anch

424
3
4

score 2 · Answer 11 · answered Apr 15 '17 at 15:55

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>

NVRM · Answer 12 · 2021-05-18T13:35:01.917

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>

score 0 · Answer 13 · edited May 23 '17 at 11:54

0

You could try box-reflect

box-reflect: 20px right;

see CSS property box-reflect compatibility? for more details

edited May 23 '17 at 11:54

Community

1
1

answered Jan 02 '13 at 04:43

Sudeep

19

1

box-reflect is a webkit only property. but i dont think it has a -moz- equivalent.. Check [this post](http://stackoverflow.com/questions/9173666/css-property-box-reflect-compatibility).. – Mithun Satheesh Jan 02 '13 at 05:06
also separator should be `:` not `;` – Mithun Satheesh Jan 02 '13 at 05:10

score 0 · Answer 14 · answered Feb 05 '14 at 03:01

this is what worked for me for <span class="navigation-pipe">></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.

score -1 · Answer 15 · edited May 02 '20 at 21:43

-1

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

edited May 02 '20 at 21:43

M--

25,431
8
61
93

answered May 02 '20 at 21:32

Христо Тодоров

49
1
7

Can you use CSS to mirror/flip text?

15 Answers15

DEMO:

Linked

Related