CSS3 3D Chuyển đổi không hoạt động trên IE11

Question

Tôi đang cố gắng để xây dựng một khối lập phương với CSS3 3D Chuyển đổi ..

Ví dụ này tôi chỉ có 2 gương mặt:

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

Với mỗi trình duyệt khác Tôi nhận được kết quả tốt, nhưng thật lạ với IE 11.

Tôi có dịch 3D tốt và xoay trên khuôn mặt màu xanh lá cây (1), nhưng mặt đỏ (2) vuông góc không hiển thị bằng 3D. Nó chỉ là hình chiếu của khuôn mặt đỏ trên mặt màu xanh lá cây.

Bạn có thể xem kết quả trên fiddle này.

PS: Tôi quay vòng 100 độ và không phải 90 để xem hình chiếu của khuôn mặt đỏ trên mặt màu xanh lá cây (nếu góc là 90, không thể nhìn thấy phép chiếu).

Cảm ơn tất cả!

Answer 1

IE chưa hỗ trợ transform-style: preserve-3d.

Bạn phải xóa biến đổi khỏi #header-cube và áp dụng cho mỗi trẻ em figure. Thật không may, IE đã sử dụng các thuộc tính không có tiền tố, vì vậy bạn không thể sử dụng transform-3d ở tất cả hoặc phải xác định các thuộc tính có tiền tố cuối cùng.

Từ IE transforms documentation:

Tại thời điểm này, Internet Explorer 10 không hỗ trợ từ khóa giữ gìn-3d. Bạn có thể làm việc xung quanh điều này bằng cách áp dụng thủ công việc chuyển đổi phần tử của phụ huynh cho từng phần tử con ngoài biến đổi bình thường của phần tử con của phần tử con.

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

trở thành:

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