Flip horizontally html and css

css, extjs, flip, html

Solution

Your fiddle already had the start of the answer - to do a second flip on the text. There was an extra `,` preventing the second rule from being parsed.

I've updated the fiddle to include the heading elements, and set them to `inline-block` because inline elements can't be transformed.

.flip-horizontal, .x-grid-cell-inner, .x-column-header-text, .x-panel-header-text {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.x-column-header-text, .x-panel-header-text {
    display: inline-block;
}

Problem

I am trying to implement a feature where I need to have two trees, one next to the other, looking like mirrors. Please, see the image: The point is I found the way to flip it horizontally but text is also inverted. What I cannot do is invert the tree letting the text as it is. Here is what I have done: http://jsfiddle.net/lontivero/R24mA/ Basically, the following class is applied to the html body: ``` .flip-horizontal { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; /*IE*/ filter: fliph; /*IE*/ } ``` The HTML code: ``` <body class="flip-horizontal"></body> ``` And the JS: ``` Ext.create('Ext.grid.Panel', { title: 'Simpsons', height: 200, width: 400, // more and more code. SO forces me to paste js code ;( renderTo: Ext.getBody() }); ```

Original source

Related problems