Rifletti orizzontalmente html e css

Sto cercando di implementare una funzione in cui ho bisogno di avere due alberi, uno accanto all'altro, simili a specchi. Si prega di vedere l'immagine:Rifletti orizzontalmente html e css

enter image description here

Il punto è che ho trovato il modo per capovolgere orizzontalmente ma il testo è anche invertito. Quello che non posso fare è invertire l'albero lasciando il testo così com'è.

Ecco quello che ho fatto: http://jsfiddle.net/lontivero/R24mA/

In sostanza, la seguente classe viene applicato al corpo 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*/ 
}

Il codice HTML:

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

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

fonte

2013-07-30 lontivero

perché non devi allineare tutto a destra? –

Il tuo violino aveva già l'inizio della risposta - per fare un secondo capovolgimento sul testo. C'è stato un ulteriore , che impedisce l'analisi della seconda regola.

I've updated the fiddle per includere gli elementi di titolo e impostarli su inline-block perché 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; 
}

fonte

2013-07-30 19:55:20 freejosh

jajaja, stavo facendo bene! grazie. – lontivero

Questo va tutto bene finché non si fa clic su un record per modificarlo ': P' – Bojangles

Ah, non l'ho verificato prima. Immagino sia solo il caso di dover rintracciare tutte le classi di testo e aggiungerle al selettore di flip. – freejosh

ho provato questo, e funziona benissimo!

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

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

io uso questo all'interno di un bootstrap col-SM-* e funziona alla grande anche

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

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

fonte

2014-12-26 14:52:02 user3683003

risposta

Problemi correlati