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

Question

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

例如,顶部的主菜单将与右侧对齐."后退"按钮指向前方,右上方标识而非左上方等.

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

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

如果这看起来很遥远,我也会接受更好的解决方案.

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

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)有些人似乎对供应商前缀有所了解

总体而言,在身体上使用RTL并使用不同的样式表可能是一个更好的选择,甚至认为它对你来说更麻烦,最终用户提供了更好的体验(不幸的是,我们想要的快速修复并不总是可用)

Answer 2

你可以试试：

body {
  direction:rtl;
}

但这只会给你一个起点......

希望能帮助到你。