Flip horizontally html и css

Я пытаюсь реализовать функцию, где мне нужно иметь два дерева, одно рядом друг с другом, похожее на зеркала. Пожалуйста, смотрите изображение:Flip horizontally html и css

enter image description here

Дело в том, я нашел способ, чтобы перевернуть его по горизонтали, но текст также инвертируется. То, что я не могу сделать, - это инвертировать дерево, позволяющее сделать текст таким, какой он есть.

Вот что я сделал: http://jsfiddle.net/lontivero/R24mA/

В основном, следующий класс применяется к 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*/ 
}

HTML-код:

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

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

источник

2013-07-30 lontivero

Почему вы не просто выровняете все направо? –

У вашей скрипки уже начался ответ - сделать второй щелчок по тексту. Был добавлен дополнительный ,, предотвращающий разбор второго правила.

I've updated the fiddle включить элементы заголовка и установить их в inline-block, поскольку 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; 
}

источник

2013-07-30 19:55:20 freejosh

jajaja, я поступал правильно! Спасибо. – lontivero

Это все хорошо и хорошо, пока вы не нажмете на запись, чтобы ее отредактировать ': P' – Bojangles

А, я не проверял это раньше. Я предполагаю, что это всего лишь случай, когда нужно отследить все текстовые классы и добавить их в селектор переворота. – freejosh

Я попробовал это и отлично работает!

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

я использую это внутри самозагрузки Col-SM- * и отлично работает слишком

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

устанавливаемыми сотовыми

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

источник

2014-12-26 14:52:02 user3683003

ответ

Смежные вопросы