Flip horizontally html and css
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()
});
Answer
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;
}