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

回答

相关问题