HTML und CSS horizontal spiegeln

Question 1

Ich versuche, eine Funktion zu implementieren, bei der ich zwei Bäume nebeneinander haben muss, die wie Spiegel aussehen. Bitte sehen Sie sich das Bild an:

Der Punkt ist, dass ich den Weg gefunden habe, es horizontal zu spiegeln, aber der Text wird auch invertiert. Was ich nicht tun kann, ist, den Baum umzukehren und den Text so zu lassen, wie er ist.

Folgendes habe ich getan: http://jsfiddle.net/lontivero/R24mA/

Grundsätzlich wird die folgende Klasse auf den HTML-Body angewendet:

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

Der HTML-Code:

<body class="flip-horizontal"></body>

Und die 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()
});

Question 2

Ihre Geige hatte bereits den Anfang der Antwort – um den Text noch einmal umzudrehen. Es gab noch ein Extra , verhindert, dass die zweite Regel analysiert wird.

Ich habe die Geige aktualisiert um die Überschriftenelemente einzuschließen, und setzen Sie sie auf inline-block weil Inline-Elemente nicht transformiert werden können.

.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;
}

Question 3

Ich habe das ausprobiert, und es funktioniert super!

HTML Quelltext:

<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>

Das 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);
}

Ich verwende dies in einem Bootstrap col-sm-* und funktioniert auch super:

<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>

das 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;
}

Question 4

Hier ist der Beispiel:

/* Entire text flipped around */
div {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
}