1

I'm working on the international website now, and one of its' languages is Arabic. Due to Arabic culture, whole interface must be mirrored vertically (obviously to flip sides, not only text direction).

I already tried to use the trick with transform: rotateY(180deg) on container and transform: rotateY(180deg) on each child node, but got an issue that my interface totally disppeared. Tried to transform: scale(-1, 1) with same result. backface-visibility: visible added to each node of document.

Do you have any idea how to mirror website interface without writing separate stylesheets and other painful things?

OK, I just recreated my problem here, maybe this can help: https://jsfiddle.net/z7ksof29/3/

Limbo
  • 2,123
  • 21
  • 41

1 Answers1

0

For me this is working:

html {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}
RacoonOnMoon
  • 1,556
  • 14
  • 29
  • `filter: FlipH` doesn't work at all, `transform: scale` gives same result :( – Limbo Apr 26 '17 at 12:05
  • Unlucky. Can u send me the link? – RacoonOnMoon Apr 26 '17 at 12:08
  • did u use all prefixes? on that one? html { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } – RacoonOnMoon Apr 26 '17 at 12:12
  • here is little example with same issue: https://jsfiddle.net/z7ksof29/1/. Look at list inside section - it's transformed, and on flip it disappears – Limbo Apr 26 '17 at 12:43
  • i use autoprefixer. However, it doesn't work in Chrome even with -webkit- prefix – Limbo Apr 26 '17 at 12:46