CSS3 - 3 डी फ्लिप एनीमेशन - आईई 10 ट्रांसफॉर्म-उत्पत्ति: संरक्षित-3 डी वर्कअराउंड

Question

आईई 10 के developer blog के माध्यम से देखकर मुझे पता चला है कि वे संरक्षित-3 डी सेटिंग का समर्थन नहीं करते हैं।

वे एक कामकाज प्रदान करते हैं, लेकिन मुझे लगता है कि यह काम नहीं कर रहा है। नीचे मेरा उदाहरण सफारी, क्रोम और फ़ायरफ़ॉक्स में काम करता है लेकिन आईई 10 नहीं। अगर कोई मुझे यह हासिल करने में मदद कर सकता है तो मैं बहुत आभारी रहूंगा।

बॉक्स को कुछ पाठ और हरे रंग की पृष्ठभूमि रंग दिखाने के लिए वाई अक्ष के चारों ओर घूमना चाहिए। यह IE10 में मामला नहीं है

मेरे उदाहरण:

एचटीएमएल

<div class="flip-wrapper"> 
    <div class="front"></div> 
    <div class="back">IE10 SUCKS</div> 
</div> 

सीएसएस

.flip-wrapper { 
    cursor: pointer; 
    height: 100%; 
    -moz-perspective: 1000; 
    -webkit-perspective: 1000; 
    -ms-perspective: 1000; 
    perspective: 1000; 
    -moz-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    width: 100%; 
} 

.flip-wrapper .front, 
.flip-wrapper .back { 
    -moz-backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

.flip-wrapper .back { 
    background: none repeat scroll 0 0 #298F68; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flip-wrapper.flipped { 
    cursor: default; 
    -webkit-animation: flip 500ms 1; 
    -moz-animation: flip 500ms 1; 
    animation: flip 500ms 1; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards; 
    -ms-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

2NE

+०१२३५१६४१०६: http://codepen.io/2ne/pen/zEpge

कोड का एक हिस्सा

Answer 1

उत्तर here मिला।

$('button').click(function() { 
    $('.card').toggleClass('flipped'); 
}); 

:

.container { 
width: 200px; 
height: 260px; 
position: relative; 
margin: 0 auto 40px; 
border: 1px solid #CCC; 
-ms-perspective: 1000; 
perspective: 1000; 
} 

.card { 
display: block; 
height: 100%; 
width: 100%; 
line-height: 260px; 
color: white; 
text-align: center; 
font-weight: bold; 
font-size: 140px; 
position: absolute; 
transition: all 0.5s linear; 
backface-visibility: hidden; 
} 

.card.flipped { 
    -ms-transform: rotateY(360deg); 
    transform: rotateY(360deg); 
} 

.front { 
    background: red; 
} 
.back { 
    background: #00f; 
    transform: rotateY(180deg); 
} 

.container:hover .card { 
    -ms-transform: rotateY(360deg); 
    transform: rotateY(360deg); 
} 

यहाँ (मंडराना घटना के अलावा) flipping के लिए एक बटन हैंडलर है: - प्रकाशित किया गया था अपने ही अद्यतन बेला here इस सीएसएस है (मैं केवल संक्षिप्तता के लिए एमएस उपसर्गों शामिल है)

दिलचस्प (और कुछ हद तक परेशान) कि IE10 का उत्तर 360 डिग्री ('फ़्लिप' वर्ग और सीएसएस में होवर ईवेंट) द्वारा फ़्लिप कर रहा है। अभी भी उसके चारों ओर अपने सिर लपेटो।

यहां उम्मीद है कि वे जल्द ही संरक्षित -3 डी लागू करें।

Answer 2

ओ पी नोट्स के रूप में, अपने ब्लॉग पर प्रश्न का उत्तर है, लेकिन दुर्भाग्य से वह quote नहीं था:

नोट W3C विनिर्देश इस संपत्ति, के लिए की रक्षा-3 डी का एक कीवर्ड मूल्य को परिभाषित करता है जो इंगित करता है कि फ़्लैटनिंग नहीं की जाती है। इस समय, इंटरनेट एक्सप्लोरर 10 संरक्षित-3 डी कीवर्ड का समर्थन नहीं करता है। आप द्वारा मैन्युअल रूप से आवेदन कर सकते हैं बच्चे तत्व तत्व के सामान्य परिवर्तन के अलावा माता-पिता तत्व प्रत्येक बच्चे तत्व में बदलते हैं।

सारांश में, सामान्य रूप में, माइक्रोसॉफ्ट के ब्राउज़र बुरी तरह है टूट।

आगे की जांच पर, ऐसा लगता है कि इंटरपोलेशन इंजन आईई 10 में अधूरा या टूटा हुआ है; मैट्रिक्स ट्रांसफॉर्म के मामले में सबकुछ लागू करने से 'यादृच्छिक' फ्लिप का कारण बनता है जब एक से अधिक धुरी के बारे में घूर्णन शामिल होता है। मैट्रिक्स इंटरपोलेशन का एकमात्र तरीका मैन्युअल रूप से सभी इंटरपोलेशन को मैन्युअल रूप से संभालना होगा। इसके अलावा, ऐसा लगता है कि कोई भी इंटरपोलेशन जहां दायां कोण शामिल है, असंगत 'यादृच्छिक' फ़्लिपिंग का कारण बनता है।

मैं आवश्यक सीएसएस को इंटरपोल करने में सफल रहा हूं, हालांकि (minified), कोड हजारों लाइन लंबी है। तो, हाँ, आईई 3 डी सीएसएस कर सकता है, अगर आपको पूर्व-संकलन और लंबे समय तक प्रतीक्षा करने की कोई बात नहीं है।

Answer 3

यहाँ

#container { 
position: relative; 
height:362px; 
width: 282px; 
margin: 0 auto; 
} 

#container div { 
position:absolute; 
left:0; 
top:0; 
width:242px; 
height: 322px; 
padding:20px; 
background:#463; 
-ms-border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
-webkit-transition: 1.5s ease-in-out; 
-moz-transition: 1.5s ease-in-out; 
-ms-transition: 1.5s ease-in-out; 
-o-transition: 1.5s ease-in-out; 
transition: 1.5s ease-in-out; 
} 

#container:hover div.upper { 
-webkit-transform: perspective(800px) rotateY(179.9deg); 
-moz-transform: perspective(800px) rotateY(179.9deg); 
transform: perspective(800px) rotateY(179.9deg); 
} 

<div id="container" aria-haspopup="true">  
    <div class="upper"></div> 
</div> 

निकोल्स

flipping rectangle

की एक बहुत ही सरल संस्करण मैं केवल फ्लिप कोड छोड़ दिया है।

बीटीडब्ल्यू, महान प्रभाव निकोलस!

Answer 4

मुझे यह कहीं भी एक अच्छा उदाहरण नहीं मिल रहा था, इसलिए मैंने कुछ अपने स्वयं के लिए बहुत अधिक समय बिताया।

यह सभी ब्राउज़रों पर काम करता है, इसमें अजीब 360deg आईई फ्लिप नहीं है, और इसमें स्थिर सामग्री के प्रावधान शामिल हैं (जो कार्ड के दोनों किनारों पर रहता है - जिसे मुझे ऊपर दाईं ओर 'फ्लिप' बटन डालना होगा दोनों तरफ से)।

- मैंने क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा और आईई के नवीनतम संस्करणों पर परीक्षण किया।

http://jsfiddle.net/Tinclon/2ega7yLt/7/

संपादित करें: इसके अलावा पारदर्शी पृष्ठभूमि के साथ काम करता है: http://jsfiddle.net/Tinclon/2ega7yLt/8/

(बेशक) सीएसएस आईई हैक्स शामिल हैं, इसलिए यह थोड़ा लंबा है, लेकिन एचटीएमएल काफी सीधा है:

<div class="card"> 
    <div class="content"> 
    <div class="cardFront">FRONT CONTENT</div> 
    <div class="cardBack">BACK CONTENT</div> 
    <div class="cardStatic">STATIC CONTENT</div> 
    </div> 
</div> 

$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this)); 

.card { 
    perspective: 1000px; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -o-perspective: 1000px; 
    -ms-perspective: 1000px; 
    margin:80px 150px; 
    width:320px; 
    height:243px; 
    vertical-align:top; 
    position:absolute; 
    display:block; 
    font-size:25px; 
    font-weight:bold; 
} 

.card .content { 
    transition: 0.5s ease-out; 
    -webkit-transition: 0.5s ease-out; 
    -moz-transition: 0.5s ease-out; 
    -o-transition: 0.5s ease-out; 
    -ms-transition: 0.5s ease-out; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 

    /* content backface is visible so that static content still appears */ 
    backface-visibility: visible; 
    -webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible; 
    -o-backface-visibility: visible; 
    -ms-backface-visibility: visible; 


    border: 1px solid grey; 
    border-radius: 15px; 
    position:relative; 
    width: 100%; 
    height: 100%; 

} 
.card.applyflip .content { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
} 


.card .content .cardStatic { 
    /* Half way through the card flip, rotate static content to 0 degrees */ 
    transition: 0s linear 0.17s; 
    -webkit-transition: 0s linear 0.17s; 
    -moz-transition: 0s linear 0.17s; 
    -o-transition: 0s linear 0.17s; 
    -ms-transition: 0s linear 0.17s; 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 

    text-align: center; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 0; 
    width: 100%; 
    line-height:100px; 
} 

.card.applyflip .content .cardStatic { 
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */ 
    transition: 0s linear 0.17s; 
    -webkit-transition: 0s linear 0.17s; 
    -moz-transition: 0s linear 0.17s; 
    -o-transition: 0s linear 0.17s; 
    -ms-transition: 0s linear 0.17s; 
    transform: rotateY(-180deg); 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
} 

.card .content .cardFront { 
    background-color: skyblue; 
    color: tomato; 
} 

.card .content .cardBack { 
    background-color: tomato; 
    color: skyblue; 
} 

.card .content .cardFront, .card .content .cardBack { 
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */ 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    -ms-backface-visibility: visible; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    line-height:200px; 
    border-radius: 14px; 
} 
.card .content .cardFront, .card.applyflip .content .cardFront { 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
} 

.card .content .cardBack, .card.applyflip .content .cardBack { 
    transform: rotateY(-180deg); 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
} 

.card .content .cardFront, .card.applyflip .content .cardBack { 
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */ 
    animation: stayvisible 0.5s both; 
    -webkit-animation: stayvisible 0.5s both; 
    -moz-animation: stayvisible 0.5s both; 
    -o-animation: stayvisible 0.5s both; 
    -ms-animation: donothing 0.5s; 
    -ms-transition: visibility 0s linear 0.17s; 
    visibility: visible; 
} 
.card.applyflip .content .cardFront, .card .content .cardBack { 
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */ 
    animation: stayvisible 0.5s both; 
    -webkit-animation: stayvisible 0.5s both; 
    -moz-animation: stayvisible 0.5s both; 
    -o-animation: stayvisible 0.5s both; 
    -ms-animation: donothing 0.5s; 
    -ms-transition: visibility 0s linear 0.17s; 
    visibility: hidden; 
} 
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } 
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } 
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } 
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } 
@-ms-keyframes donothing { 0% { } 100% { } } 

Answer 5

केवल ब्राउज़र में सीएसएस-शैलियों को लागू करने के लिए ब्राउज़र-निर्धारक जेएस या किसी अन्य विधि का उपयोग करें।

.ie .flip-wrapper:hover .back { 
    -ms-backface-visibility: visible; 
} 

.ie .flip-wrapper:hover .front { 
    visibility: hidden; 
} 

Answer 6

यहाँ एक बहुत आसान फ्लिप एल्गोरिथ्म, जो भी IE में काम करेगा:

तो निम्न कोड का उपयोग करें। https://jsfiddle.net/mff4jzd2/8/

JavaScript:

 var state = 0; 

     $('.container').on('click',function(){ 
      if(state == 0){ 

       state = 1; 
       $('.front').addClass('flip-front'); 
       $('.back').addClass('flip-back'); 

      } 
      else{ 

       state = 0; 
       $('.front').removeClass('flip-front'); 
       $('.back').removeClass('flip-back'); 

      } 
     }); 

सीएसएस:

.container{ 

     width:170px; 
     height:280px; 
     display:inline-block; 
     position:relative; 
     transform: perspective(400px); 
     cursor:pointer; 

    } 
    .front{ 

     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%; 
     background-color:blue;   
     transform: perspective(400px) rotateY(0deg);   
     backface-visibility: hidden; 
     transition: 1.0s; 
     opacity:1; 
     box-shadow: 0 8px 6px -6px black; 
    } 
    .back{ 

     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%; 
     background-color:green;  
     transform: perspective(400px) rotateY(-180deg);   
     backface-visibility: hidden; 
     transition: 1.0s; 
     opacity:0; 
     box-shadow: 0 8px 6px -6px black; 
    }  
    .flip-front{ 
     opacity:0; 
     transform: perspective(400px) rotateY(180deg); 

    } 
    .flip-back{ 
     opacity:1; 
     transform: perspective(400px) rotateY(0deg); 
    } 

HTML:

<div class="container"> 

    <div class="back"></div> 
    <div class="front"></div> 

</div>