Horizontal spiegeln html und css

Ich versuche, ein Feature zu implementieren, wo ich zwei Bäume haben muss, eins neben dem anderen, die wie Spiegel aussehen. Bitte, sehen Sie das Bild:Horizontal spiegeln html und css

enter image description here

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

ist das, was ich getan habe: http://jsfiddle.net/lontivero/R24mA/

Grundsätzlich ist die folgende Klasse in den HTML Körper angewendet wird:

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

Quelle

2013-07-30 lontivero

warum nicht einfach alles nach rechts ausrichten? –

Ihre Geige hatte bereits den Anfang der Antwort - einen zweiten Schlag auf den Text zu machen. Es gab ein extra ,, das verhindert, dass die zweite Regel analysiert wird.

I've updated the fiddle, um die Überschriftenelemente einzubeziehen, und setzen Sie sie auf inline-block, da 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; 
}

Quelle

2013-07-30 19:55:20 freejosh

jajaja, ich war richtig! Danke. – lontivero

Das ist alles gut und gut, bis Sie auf einen Datensatz klicken, um ihn zu bearbeiten ': P' – Bojangles

Ahh, das habe ich vorher nicht überprüft. Ich denke, es ist nur ein Fall, dass man alle Textklassen aufspüren und sie zum Flip Selector hinzufügen muss. – freejosh

ich habe das versucht, und funktioniert super!

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>

Die 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 benutze diese in eine Bootstrap-col-SM- * und funktioniert super zu

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

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

Quelle

2014-12-26 14:52:02 user3683003

Horizontal spiegeln html und css

Antwort

Verwandte Themen