CSS反转整个网站（镜像效果）

Question

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

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

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

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

如果这看起来有些牵强，我也乐于接受更好的解决方案。

使用的技术：PHP、Yii、Less.css、jQuery

原文由 Nathan H 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以完全按照您的描述翻转整个站点，但这里有几行 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）有些人似乎对供应商前缀有意见

总体而言，在 body 上使用 RTL 并使用不同的样式表可能是一个更好的选择，即使这对您来说更麻烦，但最终用户会获得更好的体验（不幸的是，我们想要的快速修复并不总是可用）

原文由 Sean 发布，翻译遵循 CC BY-SA 3.0 许可协议