IE 11不顯示3D變換

我有以下代碼。在IE10/11中，我無法將它渲染爲3D盒子（請在Chrome中查看）IE 11不顯示3D變換

注意：我嘗試使用內置的新代碼片段功能，但單擊「插入代碼」從未做過任何事情。

HTML：

<div class="rack-container"> 

    <div class="rack show-leftop"> 

     <figure class="back"> 
      <svg width="444" height="294"> 
      </svg> 
     </figure> 

     <figure class="front"> 
      <svg width="444" height="294"> 
      </svg> 
     </figure> 



     <figure class="left"> 
      <svg width="96" height="294"> 

       <rect class="rack-left" width="96" height="294" shape-rendering="crispEdges" fill="#fff" fill-opacity="1" orientation="vertical"></rect> 
      </svg> 
     </figure> 


     <figure class="top"> 
      <svg width="444" height="96"> 
       <rect class="rack-top" width="444" height="96" shape-rendering="crispEdges" fill="#fff" fill-opacity="1"></rect> 
      </svg> 
     </figure> 
    </div> 
</div>

CSS：

.rack-container { 
     width: 444px; 
     height: 294px; 
     position: relative; 
     margin: 0 auto 55px; 
     border: 1px solid #CCC; 
     -webkit-perspective: 2300px; 
     -moz-perspective: 2300px; 
     -o-perspective: 2300px; 
     perspective: 2300px; 
    } 

    .rack { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
     transform-style: preserve-3d; 
     -webkit-transition: -webkit-transform 1s; 
     -moz-transition: -moz-transform 1s; 
     -o-transition: -o-transform 1s; 
     transition: transform 1s; 
    } 

     .rack figure { 
      display: block; 
      position: absolute; 
      border: 2px solid black; 
      line-height: 196px; 
      font-size: 90px; 
      text-align: center; 
      font-weight: bold; 
      color: white; 
     } 

     .rack .front, 
     .rack .back { 
      width: 444px; 
      height: 294px; 
     } 

     .rack .left { 
      width: 96px; 
      height: 294px; 
      left: 247px; 
     } 

     .rack .top { 
      width: 444px; 
      height: 96px; 
      top: 50px; 
      line-height: 96px; 
     } 

     .rack .bottom { 
      display: none; 
     } 


     .rack .front { 
      -webkit-transform: translateZ(50px); 
      -moz-transform: translateZ(50px); 
      -o-transform: translateZ(50px); 
      transform: translateZ(50px); 
     } 

     .rack .back { 
      -webkit-transform: rotateY(0deg) translateZ(-50px); 
      -moz-transform: rotateY(0deg) translateZ(-50px); 
      -o-transform: rotateY(0deg) translateZ(-50px); 
      transform: rotateY(0deg) translateZ(-50px); 
     } 

     .rack .right { 
      -webkit-transform: rotateY(90deg) translateZ(150px); 
      -moz-transform: rotateY(90deg) translateZ(150px); 
      -o-transform: rotateY(90deg) translateZ(150px); 
      transform: rotateY(90deg) translateZ(150px); 
     } 

     .rack .left { 
      -webkit-transform: rotateY(90deg) translateZ(-296px); 
      -moz-transform: rotateY(90deg) translateZ(-296px); 
      -o-transform: rotateY(90deg) translateZ(-296px); 
      transform: rotateY(90deg) translateZ(-296px); 
     } 

     .rack .top { 
      -webkit-transform: rotateX(90deg) translateZ(100px); 
      -moz-transform: rotateX(90deg) translateZ(100px); 
      -o-transform: rotateX(90deg) translateZ(100px); 
      transform: rotateX(90deg) translateZ(100px); 
     } 


     .rack.show-leftop { 
      -webkit-transform: translateZ(-100px) rotateX(-25deg)rotateY(50deg); 
      -moz-transform: translateZ(-100px) rotateX(-25deg)rotateY(50deg); 
      -o-transform: translateZ(-100px) rotateX(-25deg)rotateY(50deg); 
      transform: translateZ(-100px) rotateX(-25deg)rotateY(50deg); 
     }

來源

2014-10-06 aherrick

此問題可以幫助您：http://stackoverflow.com/questions/22848328/css3-3d-transform-dont-work-on-ie11 – Arthur 2014-10-06 19:06:57

你現在可能已經想通了這一點，因爲它已經4個月，但沒有版本的IE支持變換 - style：preserve-3d。這在IE中打破了CSS中任何類型的3D類型對象。看起來斯巴達計劃將支持它，但是這對現在在IE中工作的人沒有任何幫助。

來源

2015-03-02 17:43:27 janiukjf

IE 11不顯示3D變換

回答

相關問題