我正在尝试实现一项功能，我需要两棵树，一棵挨着另一棵，看起来像镜子。请看图片:
关键是我找到了水平翻转它的方法，但文本也是倒置的。我不能做的是反转树，让文本保持原样。
这是我所做的:http://jsfiddle.net/lontivero/R24mA/
基本上，以下类应用于 html 正文:
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
HTML代码:
<body class="flip-horizontal"></body>
还有 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()
});
最佳答案
您的 fiddle 已经有了答案的开始 - 对文本进行第二次翻转。有一个额外的 , 阻止第二条规则被解析。
I've updated the fiddle包含标题元素，并将它们设置为 inline-block 因为 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;
}
关于html - 水平翻转html和css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17955983/