多维数据集不在IE中工作

时间:2015-01-22 08:36:14

标签: javascript html css css3 internet-explorer

如何让这个立方体在IE上运行?我被困在这里一个星期仍然没有成功。这是`\ JSfiddle http://jsfiddle.net/7Lg87gzu/4/

这是css代码

我不知道该怎么做,我现在已经工作了一个星期。任何帮助必须得到赞赏。

.cube > div {
    position: absolute;
    height: 320px;
    width: 320px;
    padding: 20px;
    background-color: rgba(32, 32, 32, 0.85);
    font-size: 1em;
    line-height: 1em;
    color: #fff;
    border: 1px solid #202020;
    border-radius: 10px;
}

.cube > div:first-child  {
    -webkit-transform: rotateX(90deg) translateZ(160px);
    -moz-transform: rotateX(90deg) translateZ(160px);
    transform: rotateX(90deg) translateZ(160px);
    -ms-transform:rotateX(90deg) translateZ(160px);
}

.cube > div:nth-child(2) {
    -webkit-transform: translateZ(160px);
    -moz-transform: translateZ(160px);
    transform: translateZ(160px);
}

.cube > div:nth-child(3) {
    -webkit-transform: rotateY(90deg) translateZ(160px);
    -moz-transform: rotateY(90deg) translateZ(160px);
    transform: rotateY(90deg) translateZ(160px);
    text-align: center;
}

.cube > div:nth-child(4) {
    -webkit-transform: rotateY(180deg) translateZ(160px);
    -moz-transform: rotateY(180deg) translateZ(160px);
    transform: rotateY(180deg) translateZ(160px);
}

.cube > div:nth-child(5) {
    -webkit-transform: rotateY(-90deg) translateZ(160px);
    -moz-transform: rotateY(-90deg) translateZ(160px);
    transform: rotateY(-90deg) translateZ(160px);
}

.cube > div:nth-child(5) p {
    text-align: center;
    font-size: 2.77em;
    margin: 40px;
    line-height: 60px;
}

.cube > div:nth-child(6) {
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
    -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
    transform: rotateX(-90deg) rotate(180deg) translateZ(160px);
}

.cube {
    position: relative;
    margin: 0 auto 100px;
    height: 400px;
    width: 400px;
    -webkit-transition: -webkit-transform 50ms linear;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-24deg) rotateY(20deg);
    -moz-transition: -moz-transform 50ms linear;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(-24deg) rotateY(20deg);
    transition: transform 50ms linear;
    transform-style: preserve-3d;
    transform: rotateX(-24deg) rotateY(30deg);




}

0 个答案:

没有答案