Obejście dla brakujących właściwość zachowania-3d w IE 10

Question

Microsoft mówi o ich website

Uwaga specyfikacja W3C definiuje wartość słów kluczowych z zachowania-3d dla tej właściwości, co oznacza, że ​​spłaszczenie nie jest wykonywana. W tej chwili program Internet Explorer 10 nie obsługuje słowa kluczowego preserve-3d. Można obejść to ręcznie, stosując transformację elementu nadrzędnego do każdego z elementów podrzędnych oprócz normalnego przekształcenia elementu podrzędnego.

Czy ktoś może podać przykład zastosowania?

Answer 1

do tworzenia obiektów 3D z transform-style: flat, musisz usunąć transformaty z div kontenera:

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

Wtedy będziesz mógł trzeba spłaszczyć strukturę HTML, więc żadnych DIV z transformacjami są wewnątrz div z transformacjami.

I wklej operacje transformacji (które były wcześniej w pojemniku div) na wszystkich ścianach przed ich względnymi przekształceniami.

przed:

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

po:

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

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

Answer 2

Powiedziałbym, że nie jest to możliwe. (cokolwiek Microsoft mówi). Nie można cofnąć spłaszczenia elementu potomnego, stosując kolejne przekształcenia. Zobacz następujący Demo:

fiddle

z 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> 

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

To tworzy div podstawy obracana -45 stopni. Na tym zestawie jest ustawionych kilka div, o różnych kątach obrotu. W pierwszej serii, widzianej w przeglądarce internetowej, istnieje kąt dla dziecka, który daje mu poziome położenie, a więc oryginalny rozmiar (szerszy niż rodzic, który jest obracany). W drugiej serii, bez zachowania 3d, dzieci nie mogą przekroczyć wielkości macierzystej (pozornej). Trzecia seria to przykład narożny: pod kątem prawie 90 stopni rodzic znika, ale dzieci są nadal widoczne.

To nie działa w IE, wykazując, że nie można znaleźć kąta, który przywraca właściwość preserve-3d.