Html 水平翻转html和css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17955983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flip horizontally html and css
提问by lontivero
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/
这是我所做的：http: //jsfiddle.net/lontivero/R24mA/
Basically, the following class is applied to the html body:
基本上，以下类应用于 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*/
}
The HTML code:
HTML代码：
<body class="flip-horizontal"></body>
And the JS:
和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()
});
回答by freejosh
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 fiddleto include the heading elements, and set them to inline-blockbecause inline elements can't be transformed.
我已经更新了小提琴以包含标题元素，并将它们设置为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;
}
回答by Alexandre Ribeiro
I tried this, and it works great!
我试过这个，效果很好！
HTML code:
HTML代码：
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- Front content -->
</div>
<div class="back">
<!-- Back content -->
</div>
</div>
</div>
The CSS:
CSS：
/* Flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* Flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* Hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Front pane, placed above back */
.front {
z-index: 2;
/* For Firefox 31 */
transform: rotateY(0deg);
}
/* Back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
I use this inside a Bootstrap col-sm-*and works great too:
我在 Bootstrap 中使用它col-sm-*并且效果很好：
<div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="content-box flipper">
<div class="content-box-front">
<span class="glyphicon glyphicon-envelope content-box-icon"></span>
<h4>Share your emotions</h4>
</div>
<div class="content-box-back">
<p>Share emotions with friends, family and teammates.</p>
<button>Read more</button>
</div>
</div>
</div>
the CSS:
CSS：
.content-box {
position: relative;
text-align: center;
height: 105px;
width: 100%;
}
.content-box-icon {
font-size: 30px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
text-align: center;
display: block;
margin: 5px auto 15px auto;
color: #fff;
float: none;
background:#25acfd
}
.content-box-front
{
z-index: 2;
/* For Firefox 31 */
transform: rotateY(0deg);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 105px;
}
.content-box-back {
transform: rotateY(180deg);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 105px;
}
/* Entire container, keeps perspective */
/* Flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
/* Flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
