71

I did some googling and here's my answer

.mirror {
  display: block;
  -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  -o-transform: matrix(-1, 0, 0, 1, 0, 0);
}
<!--[if IE]>
<style>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    }
</style>
<![endif]-->

<div class="mirror">testing</div>

The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
TiansHUo
  • 8,509
  • 7
  • 45
  • 57
  • Use `transform-origin` to control the point about which the transformation is applied. – ivan_pozdeev Nov 26 '12 at 22:08
  • 27
    ˙pɐdǝʇou sʍopuᴉʍ ʇsnɾ ƃuᴉsn ʇᴉ ʎɐldsᴉp puɐ ǝlᴉɟ ʇxǝʇ ɐ sɐ ʇᴉ ǝʌɐs uɐɔ noʎ ʇɐɥʇ ǝƃɐʇuɐʌpɐ ǝɥʇ sɐɥ oslɐ ʇxǝʇ uᴉɐlԀ ˙sᴉɥʇ ǝʞᴉl sɐǝɹɐ xoq-ʇuǝɯɯoɔ ƃuᴉpnlɔuᴉ 'pǝʍollɐ sᴉ ʇxǝʇ uᴉɐld ǝɹǝɥʍ ǝɹǝɥʍʎuɐ ʇᴉ ǝʇsɐd puɐ ʎdoɔ uɐɔ noʎ ʇɐɥʇ sᴉ ɥɔɐoɹddɐ sᴉɥʇ ɟo ǝƃɐʇuɐʌpɐ ǝɥ┴ ˙ʇɔǝɟɟǝ ɹoɹɹᴉɯ *ʇɔǝɟɹǝd* ɥʇᴉʍ sɹǝʇɔɐɹɐɥɔ ʎɐldsᴉp uɐɔ noʎ 'ɥƃnoɥʇ **ʇdᴉɹɔsɐʌɐſ ǝlʇʇᴉl ɐ** ʇsnɾ ɥʇᴉM – Pacerier Jun 30 '15 at 07:44
  • 2
    I resisted flipping my laptop upside down to read the above comment. This... took a while. – Kay May 27 '16 at 22:27

2 Answers2

144

Your code is correct but there is an easier way to do this:

img.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */

  filter: FlipH;                 /* IE 6/7/8 */
}

I think this solves your centered mirroring issue.

As noted you will have to set the element to use a display of block, inline-block etc.

hitautodestruct
  • 20,081
  • 13
  • 69
  • 93
  • 18
    Note that you'll have to use a block or an inline-block element: http://codepen.io/igalst/pen/fKhmp – IgalSt Jun 03 '13 at 09:57
14

to mirror use transform: scaleX(-1); to flip use rotate(180deg);

Yehuda Schwartz
  • 3,378
  • 3
  • 29
  • 38