CSS3 Transform Translate3D IE10

according to IE 10's supported technologies what I am trying to accomplish should be working, but I cannot figure out what is going on. in firefox and chrome it works just like it should, but in IE10 it is rendered incorrectly.

I have exhausted IE's support doc's, and like I said, this should be working.

here is the JS Fiddle [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); } 

any suggestions?