CSS3變換Translate3D IE10

根據IE 10支持的技術我試圖完成應該工作，但我無法弄清楚發生了什麼。在Firefox和鉻它的作品就像它應該，但在IE10中，它呈現不正確。CSS3變換Translate3D IE10

我已經用盡IE的支持文檔，就像我說的，這應該是工作。

這裏是JS小提琴[的jsfiddle]：http://jsfiddle.net/qzDV3/1/

body 
{ 
    background-color:Blue; 
    overflow:hidden; 
} 
#tumble 
{ 
    position:absolute; 
    top:70%; 
    left:5%; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 
#tumble.tumble 
{ 
    left:100%; 
    top:85%; 
    -webkit-transform:rotate3d(1, -1, 1, 256deg); 
    -moz-transform:rotate3d(1, -1, 1, 256deg); 
    transform:rotate3d(1, -1, 1, 256deg); 
} 
.box 
{ 
    position:absolute; 
    top:0%; 
    left:0%; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform:rotate3d(1, 1, 1, -30deg); 
    -moz-transform:rotate3d(1, 1, 1, -30deg); 
    transform:rotate3d(1, 1, 1, -30deg); 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
} 
.box.rotate 
{ 
    -webkit-transform:rotate3d(1, -1, 1, 256deg); 
    -moz-transform:rotate3d(1, -1, 1, 256deg); 
    transform:rotate3d(1, -1, 1, 256deg); 
} 
.front, .back 
{ 
    top:0; 
    left:0; 
} 
.front 
{ 
    -webkit-transform: translate3d(0,0,100px); 
    -moz-transform: translate3d(0,0,100px); 
    transform: translate3d(0,0,100px); 
} 
.back 
{ 
    -webkit-transform: translate3d(0,0,-100px); 
    -moz-transform: translate3d(0,0,-100px); 
    transform: translate3d(0,0,-100px); 
} 
.left, .right 
{ 
    top:0; 
    -webkit-transform: rotateY(90deg); 
    -moz-transform: rotateY(90deg); 
    transform: rotateY(90deg); 
} 
.left 
{ 
    left:-100px; 
} 
.right 
{ 
    left:100px; 
} 
.front, .back, .left, .right, .bottom 
{ 
    position:absolute; 
    border:2px solid #CF985D; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    background-image:url(SRC/Images/cardboard_texture_02.jpg); 
    width:200px; 
    height:200px; 
} 
.bottom 
{ 
    top:100px; 
    -webkit-transform: rotateX(90deg); 
    -moz-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 
.top1, .top2 
{ 
    position:absolute; 
    border:2px solid #CF985D; 
    background-image:url(SRC/Images/cardboard_texture_02.jpg); 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.top1, .top2 
{ 
    top:0px; 
    left:0; 
    width:100px; 
    height:200px; 
} 
.top2 
{ 
    right:0; 
} 
.outer1, .outer2 
{ 
    position:absolute; 
    width:200px; 
    height:200px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.outer1 
{ 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
    -webkit-transform: rotateX(90deg); 
    -moz-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 
.outer2 
{ 
    -webkit-transition: all 2s bounce; 
    -moz-transition: all 2s bounce; 
    transition: all 2s bounce; 
    -webkit-transform: rotateX(90deg) rotateY(180deg); 
    -moz-transform: rotateX(90deg) rotateY(180deg); 
    transform: rotateX(90deg) rotateY(180deg); 
} 
.outer1:hover 
{ 
    -webkit-transform: rotateX(90deg) rotateY(180deg); 
    -moz-transform: rotateX(90deg) rotateY(180deg); 
    transform: rotateX(90deg) rotateY(180deg); 
} 
.outer2:hover 
{ 
    -webkit-transform: rotateX(90deg) rotateY(0deg); 
    -moz-transform: rotateX(90deg) rotateY(0deg); 
    transform: rotateX(90deg) rotateY(0deg); 
} 
.outer1 
{ 
    left:-100px; 
    top:-100px; 
} 
.outer2 
{ 
    right:-300px; 
    top:-100px; 
} 
.outer1.close 
{ 
    -webkit-transform: rotateX(90deg) rotateY(180deg); 
    -moz-transform: rotateX(90deg) rotateY(180deg); 
    transform: rotateX(90deg) rotateY(180deg); 
} 
.outer2.close 
{ 
    -webkit-transform: rotateX(90deg) rotateY(0deg); 
    -moz-transform: rotateX(90deg) rotateY(0deg); 
    transform: rotateX(90deg) rotateY(0deg); 
}

有什麼建議？

來源

2013-04-16 user2213022

從微軟自己的[文件]（http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx# the_ms_transform_style_property）：Internet Explorer 10不支持'preserve-3d'關鍵字。除了子元素的常規變換之外，還可以通過手動將父元素的變換應用於每個子元素來解決此問題。 –

CSS3變換Translate3D IE10

回答

相關問題