CSS3 के 3 डी रूपांतरण IE11

Question

मैं CSS3 के 3 डी के साथ एक घन का निर्माण करने की कोशिश कर रहा हूँ रूपांतरण पर काम नहीं करता ..

इस उदाहरण के लिए मैं केवल 2 चेहरे है:

<section id="header-cube-container"> 
    <div id="header-cube"> 
     <figure></figure> 
     <figure></figure> 
    </div> 
</section> 

हर दूसरे ब्राउज़र के साथ मुझे अच्छा परिणाम मिलता है, लेकिन यह आईई 11 के साथ अजीब है।

मेरे पास एक अच्छा 3 डी अनुवाद है और हरे रंग के चेहरे (1) पर घूमता है, लेकिन लाल चेहरे (2) लम्बवत 3 डी में प्रदर्शित नहीं होता है। यह केवल हरे रंग के चेहरे पर लाल चेहरे का प्रक्षेपण है।

आप इस fiddle पर परिणाम देख सकते हैं।

पीएस: मैं हरे रंग के चेहरे पर लाल चेहरे के प्रक्षेपण को देखने के लिए 100 डिग्री का घूर्णन करता हूं और 90 नहीं (अगर कोण 90 था, प्रक्षेपण दिखाई नहीं देता है)।

सभी को धन्यवाद!

Answer 1

आईई transform-style: preserve-3d का समर्थन नहीं करता है।

आपको #header-cube से ट्रांसफॉर्म को हटाना होगा और इसे figure बच्चों में से प्रत्येक पर लागू करना होगा। दुर्भाग्यवश आईई पहले से ही गैर-प्रीफ़िक्स्ड गुणों का उपयोग करता है, इसलिए आप या तो transform-3d का उपयोग नहीं कर सकते हैं या पिछली बार प्रीफ़िक्स्ड गुणों को परिभाषित करना है।

IE transforms documentation से

:

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

JSFiddle: http://jsfiddle.net/TTDH7/17/

#header-cube { 
    transform-style: preserve-3d; 
    transform: rotateX(43deg) rotateZ(130deg); 
} 
figure:nth-child(1) { 
    transform: translateZ(-16px); 
} 
figure:nth-child(2) { 
    transform: rotateY(-100deg) translateZ(-16px); 
} 

हो जाता है:

#header-cube { 
    transform-style: preserve-3d; 
    -ms-transform-style: none; 
    transform: rotateX(43deg) rotateZ(130deg); 
    -ms-transform: none; 
} 
figure:nth-child(1) { 
    transform: translateZ(-16px); 
    -ms-transform: rotateX(43deg) rotateZ(130deg) 
        translateZ(-16px); 
} 
figure:nth-child(2) { 
    transform: rotateY(-100deg) translateZ(-16px); 
    -ms-transform: rotateX(43deg) rotateZ(130deg) 
        rotateY(-100deg) translateZ(-16px); 
}