Voltear horizontalmente html y css
flip image css (2)
¡Intenté esto, y funciona genial!
código 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>
El 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);
}
Utilizo esto dentro de un bootstrap col-sm- * y funciona muy bien también
<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>
el 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;
}
Estoy tratando de implementar una función donde necesito tener dos árboles, uno al lado del otro, que parezcan espejos. Por favor, mira la imagen:
El punto es que encontré la manera de voltearlo horizontalmente pero el texto también se invierte. Lo que no puedo hacer es invertir el árbol dejando el texto tal como está.
Esto es lo que hice: http://jsfiddle.net/lontivero/R24mA/
Básicamente, la siguiente clase se aplica al cuerpo 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*/
}
El código HTML:
<body class="flip-horizontal"></body>
Y el 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()
});
Tu violín ya tenía el principio de la respuesta, para hacer un segundo giro en el texto. Hubo un extra , evitando que la segunda regla sea analizada.
He actualizado el violín para incluir los elementos del encabezado y establecerlos inline-block línea porque los elementos en línea no se pueden transformar .
.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;
}