水平翻转html和css
lon*_*ero 28 html css extjs flip
我正在尝试实现一个功能,我需要有两棵树,一个在另一个旁边,看起来像镜子.请看图片:
关键是我找到了水平翻转的方法,但文字也是倒置的.我不能做的是反转树,让文本原样.
这就是我所做的: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()
});
fre*_*osh 40
你的小提琴已经有了答案的开始 - 对文本进行第二次翻转.有一个额外的,阻止第二个规则被解析.
我已经更新了小提琴以包含标题元素,并将它们设置为inline-block因为内联元素无法转换.
.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;
}