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




list pdf (3)

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

मुद्दा यह है कि मुझे क्षैतिज रूप से फ़्लिप करने का तरीका मिला लेकिन पाठ भी उलटा हुआ है। मैं जो नहीं कर सकता वह पेड़ को टेक्स्ट को दे रहा है।

यहां मैंने जो किया है: 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()
});

Answers

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

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>

सीएसएस

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

पाठ पर दूसरी फ्लिप करने के लिए - आपके बेवकूफ में जवाब की शुरुआत पहले से ही थी। दूसरे नियम को पारदर्शी होने से रोकते हुए एक अतिरिक्त था।

मैंने शीर्षक तत्वों को शामिल करने के लिए पहेली को अद्यतन किया है , और उन्हें inline-block सेट किया है क्योंकि इनलाइन तत्वों को परिवर्तित नहीं किया जा सकता है

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

सीएसएस मार्जिन, पैडिंग और सीमा बॉक्स मॉडल गुण हैं।

  • मार्जिन सामग्री के बाहर जगह है।
  • पैडिंग सामग्री के अंदर जगह है।
  • सीमा पैडिंग के बाहर एक दृश्यमान रूपरेखा (कोई भी रंग, शैली और चौड़ाई) है।

कुल चौड़ाई = सामग्री-चौड़ाई + पैडिंग + सीमा।







html css extjs flip