फ्लिप क्षैतिज एचटीएमएल और सीएसएस

मैं एक ऐसी सुविधा को लागू करने की कोशिश कर रहा हूं जहां मुझे दो पेड़, एक दूसरे के बगल में, दर्पण की तरह दिखने की आवश्यकता है।फ्लिप क्षैतिज एचटीएमएल और सीएसएस

enter image description here

बिंदु मैं इसे क्षैतिज फ्लिप करने रास्ता मिल गया, लेकिन पाठ भी उलटा है: कृपया, छवि देखते हैं। मैं जो नहीं कर सकता वह पेड़ को टेक्स्ट को दे रहा है। http://jsfiddle.net/lontivero/R24mA/

असल में, निम्नलिखित वर्ग एचटीएमएल शरीर के लिए लागू किया जाता है:

यहाँ मैं क्या किया है है

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

एचटीएमएल कोड:

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

और जे एस:

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

जजाजा, मैं सही कर रहा था! धन्यवाद। – lontivero

यह सब ठीक है और अच्छा है जब तक कि आप इसे संपादित करने के लिए रिकॉर्ड पर क्लिक न करें ': P' – Bojangles

आह, मैंने पहले यह जांच नहीं की थी। मुझे लगता है कि यह सभी पाठ वर्गों को ट्रैक करने और उन्हें फ्लिप चयनकर्ता में जोड़ने का एक मामला है। – freejosh

मैंने कोशिश की, और बढ़िया काम करता है!

एचटीएमएल कोड:

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

सीएसएस

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

मैं अंदर एक बूटस्ट्रैप कॉल-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

फ्लिप क्षैतिज एचटीएमएल और सीएसएस

उत्तर

संबंधित मुद्दे