html - CSS反转整个网站(镜像效果)

我正在建立一个多语言的网站。有些语言(如希伯来语)从右到左阅读。除了实际的文字外，这些用户还习惯于将导航和其他视觉线索颠倒过来。

例如，顶部的主菜单将向右对齐。 “后退”按钮将指向前方，徽标位于右上 Angular 而不是左上 Angular ，依此类推。

一个解决方案当然是创建一个全新的设计，但这意味着我必须维护2个模板。不理想。

我只是在想，是否有可能在CSS中翻转整个设计？喜欢照镜子吗？

如果这似乎很牵强，我也愿意寻求更好的解决方案。

使用的技术:PHP，Yii，Less.css，jQuery

最佳答案

可以按照您的描述完全翻转整个站点，但是请参见此处的几行CSS:http://jsbin.com/aduqeq/5/edit

CSS:

body {
        margin: 0 auto;
        width: 300px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
      }

但是，此方法有一些缺点:

1)虽然它在Firefox + Chrome中可以正常工作，但仅在IE8 +中才起作用(文本在IE中对我来说看起来很奇怪)，期望支持会有些许补丁(这是CSS3的一项新功能)

2)这里有明显的语义缺点

3)有些人似乎对供应商前缀有所了解

总体上，在主体上使用RTL并使用其他样式表可能是一个更好的选择，甚至认为它对您来说更麻烦，为最终用户提供了更好的体验(不幸的是，我们所需的快速修复方法并不总是可用的)

关于html - CSS反转整个网站(镜像效果)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14193382/