css 的 transform:scale(-1,1) 使得fixed定位失效（fixed会降级为absolute）问题

最近写一个阿拉伯国家的web，因为阿拉伯语言的阅读习惯是从右到左，而且本来就有做好了的英语版本的web，为了快速开发，就把英语版本的web复制一份出来，在调整一下css样式就好了，如下：
在HTML根元素加上css：

body{

transform:scale(-1,1)；

}

//这样，整个web布局就会反过来。
但是，HTML内的文字也反过来了，所以这时，就可以在对应包裹文字的元素再把样式反过来（因为阿拉伯阅读习惯本来就是从右到左，所以翻译书写习惯就是从右到左，所以开发时，文字在英文状态下正常顺序）
例如：
<p>er<p>
p{
    transform:scale(-1,1);
}
而行内元素需要变成块级元素或行内块：
<span>rwerer</span>
span{
    display:inline-block;
    transform:scale(-1,1);
}

但是，我的项目里有fixed定位的元素，HTML根元素使用了transform，把fixed定位降级了，这时怎么办呢？
别急，方法还是有的：
就是，哪里需要转换结构就在哪个结构转换，再在结构内把文字转过来，而有fixed定位的，避开transform（可以再嵌套元素避开）
如：
HTML：
<div class="container">
    <div class="tran">
        <p>从右到左阅读习惯</p>
    </div>
</div>

css：
.container{
    position:fixed;
    top:0;
    left:0;
}
.tran{
    transform:scale(-1,1);
}
.tran p{
    transform:scale(-1,1);
    text-align:right;
}

end