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      9986       amp  9986   that I d like to display pointing left and not right

User · Answer

Real mirror        x000D   x000D   mirror  x000D      display  inline-block   x000D      font-size  30px  x000D   x000D      -webkit-transform  matrix -1  0  0  1  0  0   x000D      -moz-transform  matrix -1  0  0  1  0  0   x000D      -o-transform  matrix -1  0  0  1  0  0   x000D      transform  matrix -1  0  0  1  0  0   x000D    x000D   lt span class  mirror  gt Mirror Text lt span gt  x000D   x000D   x000D

User · Answer

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    lt i class  icon-search mirror-icon  gt  lt  i gt    to get a search icon with the handle on the left

User · Answer

direction  rtl  is probably what you are looking for

User · Answer

Just adding a working demo for horizontal and vertical mirror flip    x000D   x000D   horizontal-flip   x000D    -moz-transform  scale -1  1   x000D    -webkit-transform  scale -1  1   x000D    -o-transform  scale -1  1   x000D    -ms-transform  scale -1  1   x000D    transform  scale -1  1   x000D    x000D   x000D   vertical-flip   x000D    -moz-transform  scale 1  -1   x000D    -webkit-transform  scale 1  -1   x000D    -o-transform  scale 1  -1   x000D    -ms-transform  scale 1  -1   x000D    transform  scale 1  -1   x000D    x000D   lt div class  horizontal-flip  gt  x000D    Hello  World x000D     lt input type  text  gt  x000D   lt  div gt  x000D   lt hr gt  x000D   lt div class  vertical-flip  gt  x000D    Hello  World x000D     lt input type  text  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

you can use  transform  to achieve this   http   jsfiddle net aRcQ8   css   -moz-transform  rotate -180deg   -webkit-transform  rotate -180deg   transform  rotate -180deg

User · Answer

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

User · Answer

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    x000D   x000D  span  display  inline-block  margin 1em     x000D   flip H  transform  scale -1  1   color red    x000D   flip V  transform  scale 1  -1   color green    x000D   lt span class  flip H  gt Demo text  amp  9986  lt  span gt  x000D   lt span class  flip V  gt Demo text  amp  9986  lt  span gt  x000D   x000D   x000D

User · Answer

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     x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt title gt Text rotation lt  title gt  x000D     lt style type  text css  media  screen  gt  x000D       scissors   x000D        display  inline-block  x000D        font-size  50px  x000D        color  red  x000D        x000D       original   x000D        color  initial  x000D        x000D       flipped   x000D        transform  rotateZ 180deg   x000D        x000D       upward   x000D        transform  rotateZ -90deg   x000D        x000D       downward   x000D        transform  rotateZ 90deg   x000D        x000D     lt  style gt  x000D     x000D   lt  head gt  x000D   lt body gt  x000D     lt ul gt  x000D       lt li gt Original   lt span class  scissors original  gt  amp  9986  lt  span gt  lt  li gt  x000D       lt li gt Flipped   lt span class  scissors flipped  gt  amp  9986  lt  span gt  lt  li gt  x000D       lt li gt Upward   lt span class  scissors upward  gt  amp  9986  lt  span gt  lt  li gt  x000D       lt li gt Downward   lt span class  scissors downward  gt  amp  9986  lt  span gt  lt  li gt  x000D     lt  ul gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

-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

User · Answer

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    lt button gt     lt span class  s7-back mirror  gt  lt  span gt     lt span gt Next lt  span gt   lt  button gt

User · Answer

this is what worked for me for  lt span class  navigation-pipe  gt  amp gt  lt  span gt   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

User · Answer

You could try box-reflect  box-reflect  20px right    see CSS property box-reflect compatibility  for more details

[html] Can you use CSS to mirror/flip text?

Examples related to html

Examples related to css