Giải pháp cho thiếu tài sản bảo tồn-3d trong IE 10

Question

Microsoft nói trên của họ website

Lưu ý Các đặc điểm kỹ thuật W3C định nghĩa một giá trị từ khóa của bảo tồn-3d cho thuộc tính này, mà chỉ ra rằng làm phẳng không được thực hiện. Tại thời điểm này, Internet Explorer 10 không hỗ trợ từ khóa bảo toà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 phép biến đổi của phần tử cha cho mỗi phần tử con ngoài phép biến đổi bình thường của phần tử con.

Ai đó có thể đưa ra ví dụ về cách áp dụng điều này?

Answer 1

Để tạo các đối tượng 3D với transform-style: flat, bạn sẽ cần phải loại bỏ sự biến đổi từ div container:

.object3d { 
    transform-style: preserve-3d; // remove to get the flat behavior in all browers 
    transform: translateX(80px) rotateY(-35deg); // cut the container transforms. 
} 

Sau đó, bạn sẽ có thể cần phải làm phẳng cấu trúc html của bạn, vì vậy không divs với biến đổi là bên trong divs với biến đổi.

Và dán các phép biến đổi (được sử dụng để nằm trên div vùng chứa) trên tất cả các khuôn mặt trước các phép biến đổi tương đối của chúng.

trước:

.object3d__bottom { 
    transform: translateY(50px) rotateX(90deg); 
} 

sau:

.object3d__bottom { 
    transform: translateX(80px) rotateY(-35deg) translateY(50px) rotateX(90deg); 
} 

Demo: http://jsbin.com/ICuVihi/17/

Answer 2

Tôi có thể nói rằng điều này không rõ ràng. (bất cứ điều gì Microsoft nói). Việc làm phẳng phần tử con không thể hoàn tác khi áp dụng các biến đổi tiếp theo. Xem các bản demo sau:

fiddle

với HTML:

<div class="base" id="base1">Base1 
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div> 
    <div class="inner" id="inner3">3</div> 
    <div class="inner" id="inner4">4</div> 
    <div class="inner" id="inner5">5</div> 
    <div class="inner" id="inner6">6</div> 
    <div class="inner" id="inner7">7</div> 
    <div class="inner" id="inner8">8</div> 
    <div class="inner" id="inner9">9</div> 
</div> 
<div class="base" id="base2">Base2 
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div> 
    <div class="inner" id="inner3">3</div> 
    <div class="inner" id="inner4">4</div> 
    <div class="inner" id="inner5">5</div> 
    <div class="inner" id="inner6">6</div> 
    <div class="inner" id="inner7">7</div> 
    <div class="inner" id="inner8">8</div> 
    <div class="inner" id="inner9">9</div> 
</div> 
<div class="base" id="base3">Base3 
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div> 
    <div class="inner" id="inner3">3</div> 
    <div class="inner" id="inner4">4</div> 
    <div class="inner" id="inner5">5</div> 
    <div class="inner" id="inner6">6</div> 
    <div class="inner" id="inner7">7</div> 
    <div class="inner" id="inner8">8</div> 
    <div class="inner" id="inner9">9</div> 
</div> 

và CSS:

.base { 
    width: 200px; 
    height: 250px; 
    display: block; 
    -webkit-transform: rotatey(-45deg); 
    transform: rotatey(-45deg); 
    border: solid 2px black; 
} 

#base1 { 
    -webkit-transform-style: preserve-3d; 
} 

#base2 { 
    left: 300px; 
    top: 0px; 
    position: absolute; 
} 

#base3 { 
    left: 600px; 
    top: 0px; 
    position: absolute; 
    -webkit-transform: rotatey(-88deg); 
    transform: rotatey(-88deg); 
    -webkit-transform-style: preserve-3d; 
} 

.inner { 
    border: solid 1px black; 
    height: 20px; 
    background-color: red; 
} 

#inner1 { 
    -webkit-transform: rotatey(0deg); 
    transform: rotatey(0deg); 
} 
#inner2 { 
    -webkit-transform: rotatey(20deg); 
    transform: rotatey(20deg); 
} 
#inner3 { 
    -webkit-transform: rotatey(40deg); 
    transform: rotatey(40deg); 
} 
#inner4 { 
    -webkit-transform: rotatey(60deg); 
    transform: rotatey(60deg); 
} 
#inner5 { 
    -webkit-transform: rotatey(80deg); 
    transform: rotatey(80deg); 
} 
#inner6 { 
    -webkit-transform: rotatey(100deg); 
    transform: rotatey(100deg); 
} 
#inner7 { 
    -webkit-transform: rotatey(120deg); 
    transform: rotatey(120deg); 
} 
#inner8 { 
    -webkit-transform: rotatey(140deg); 
    transform: rotatey(140deg); 
} 
#inner9 { 
    -webkit-transform: rotatey(160deg); 
    transform: rotatey(160deg); 
} 

Điều đó tạo ra một cơ sở div xoay -45 DEG. Một số div được đặt trên cái này, với các góc xoay khác nhau. Trong loạt đầu tiên, nhìn thấy trong một trình duyệt webkit, có một góc cho đứa trẻ cung cấp cho anh ta vị trí nằm ngang và do đó kích thước ban đầu (rộng hơn so với cha mẹ, được xoay). Trong loạt thứ hai, không có bảo quản 3d, trẻ em không thể exced kích thước cha mẹ (rõ ràng). Loạt thứ ba là một ví dụ ở góc: ở một góc gần 90 độ, cha mẹ biến mất, nhưng các em vẫn còn nhìn thấy được.

Điều này không hoạt động trong IE, chứng tỏ rằng không thể tìm ra một góc khôi phục thuộc tính bảo toàn-3d.