CSS3 bi-directional Flipper

Question

I'm looking for a CSS converter LTR to RTL that supports the new CSS3 transforms

for example:

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%;
}

this example represents LTR CSS, I want a tool to give me the RTL version of the provided CSS

Answer 1

I believe RTLCSS is what you are looking for, output produced by your example as input:

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

Direct links:

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

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