CSS3 双向翻转器

Question

我正在寻找支持新的 CSS3 转换的 LTR 到 RTL 的 CSS 转换器

例如:

pre {
    width: 33em;
    border: solid red;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg);
    -o-transform-origin:60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}

这个例子代表 LTR CSS，我想要一个工具给我提供的 CSS 的 RTL 版本

Answer 1

我相信RTLCSS是你正在寻找的，你的例子产生的输出作为输入:

pre {
     width: 33em;
     border: solid red;

    -webkit-transform: translate(-100px) rotate(-20deg);
    -webkit-transform-origin: 40% 100%;

    -o-transform:translate(-100px) rotate(-20deg); 
    -o-transform-origin:40% 100%;

    transform: translate(-100px) rotate(-20deg);
    transform-origin: 40% 100%;
}

jsfiddle:LTR Version

jsfiddle:RTL Version

直接链接:

Github:https://github.com/MohammadYounes/rtlcss

NPM:https://www.npmjs.org/package/rtlcss