CSS3 变换 Translate3D IE10答案

【问题标题】：CSS3 Transform Translate3D IE10CSS3 变换 Translate3D IE10
【发布时间】：2013-04-16 20:41:30
【问题描述】：

根据 IE 10 支持的技术，我试图完成的工作应该是可行的，但我无法弄清楚发生了什么。在 firefox 和 chrome 中它的工作方式与它应该的一样，但在 IE10 中它呈现不正确。

我已经用尽了 IE 的支持文档，就像我说的，这应该可以工作。

这里是 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);
}

有什么建议吗？

【问题讨论】：

来自微软自己的documentation：Internet Explorer 10 不支持preserve-3d 关键字。除了子元素的正常变换之外，您可以通过手动将父元素的变换应用于每个子元素来解决此问题。

标签： css transform internet-explorer-10 translate3d