Odwróć poziomo html i css

Próbuję zaimplementować funkcję, w której muszę mieć dwa drzewa, jeden obok drugiego, wyglądający jak lusterka. Proszę zobaczyć obraz:Odwróć poziomo html i css

enter image description here

Chodzi o to, znalazłem sposób, aby odwrócić go w poziomie, ale tekst jest również odwrócone. Czego nie mogę zrobić, to odwrócić drzewo, pozostawiając tekst takim, jaki jest.

Oto co zrobiłem: http://jsfiddle.net/lontivero/R24mA/

Zasadniczo dodaje klasa jest stosowany do ciała 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*/ 
}

Kod HTML:

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

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

Źródło

2013-07-30 lontivero

dlaczego po prostu nie dopasowujesz wszystkiego w prawo? –

Twoje skrzypce ma już początek odpowiedzi - zrobić drugie przerzucenie tekstu. Wystąpiło dodatkowe , uniemożliwiające analizowanie drugiej reguły.

I've updated the fiddle, aby uwzględnić elementy nagłówka i ustawić je na inline-block, ponieważ 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; 
}

Źródło

2013-07-30 19:55:20 freejosh

jajaja, robiłem dobrze! Dziękuję Ci. – lontivero

To wszystko dobrze i dobrze, dopóki nie klikniesz rekordu, aby go edytować ': P' – Bojangles

Ahh, wcześniej tego nie sprawdziłem. Przypuszczam, że to tylko kwestia konieczności wyśledzenia wszystkich klas tekstowych i dodania ich do przełącznika klapki. – freejosh

Próbowałem tego i działa świetnie!

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

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

Używam tego wewnątrz bootstrap kol-SM * i działa zbyt wielkie

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

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

Źródło

2014-12-26 14:52:02 user3683003

Odwróć poziomo html i css

Odpowiedz

Powiązane problemy