Menu
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() }); 
371
You may do a transform: rotate(180deg); for the horizontal+vertical flip.
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; } I tried this, and it works great!
HTML code:
<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:
/* 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:
<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:
.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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With