Html preserve-3d在IE10中不起作用_Html_Internet Explorer_Css

Html preserve-3d在IE10中不起作用

html internet-explorer css

Html preserve-3d在IE10中不起作用,html,internet-explorer,css,Html,Internet Explorer,Css,下面是3d立方体的代码，它可以在chrome和safari上正常工作，但不适用于IE10。我发现转换方式：presev-3d，防腐剂：1300px，防腐剂来源：50%300px；不是为IE10工作。在IE10中有没有类似的解决方案或替代属性请查看JSFIDLE链接并帮助我。非常感谢。 Sheshpreserve-3d在IE10中不受支持，尽管在其他当前版本的浏览器中也有。看解决方法是注意：W3C规范为此属性定义了一个关键字值preserve-3d，表示不执行展平。此时，Internet

下面是3d立方体的代码，它可以在chrome和safari上正常工作，但不适用于IE10。我发现转换方式：presev-3d，防腐剂：1300px，防腐剂来源：50%300px；不是为IE10工作。在IE10中有没有类似的解决方案或替代属性

请查看JSFIDLE链接并帮助我。非常感谢。

Shesh

preserve-3d在IE10中不受支持，尽管在其他当前版本的浏览器中也有。看

解决方法是

注意：W3C规范为此属性定义了一个关键字值

preserve-3d

，表示不执行展平。此时，Internet Explorer 10不支持

preserve-3d

关键字。除了子元素的法线变换外，还可以通过手动将父元素的变换应用于每个子元素来解决此问题

罗布发现了这个链接，这是值得称赞的

preserve-3d

在IE11及以下版本中不可用。它正在开发中，包含在IE for Windows 10技术预览中

资料来源：

博文：

<body> <article class="viewport">
<section class="cube">
    <div>

        <div class="part psm"><span data-href="#test">C1a</span></div>
        <div class="part rm"> <span data-href="#test">C1b</span></div>
        <div class="part ims" style="background: #f0e200;"><span data-href="#test">C1c</span></div>
        <div class="part bsm"><span data-href="#test">C1d</span></div>

    </div>
    <div>


        <div class="part ims" style="background: #f0e200;"><span data-href="#test">C2a</span></div>
        <div class="part bsm"><span data-href="#test">C2b</span></div>
        <div class="part pm"> <span data-href="#test">C2c</span></div>
        <div class="part um"> <span  data-href="#test">C2d</span></div>

    </div>
    <div>

        <div class="part bsm"><span data-href="#test">C3a</span></div>
        <div class="part rm"> <span data-href="#test">C3b</span></div>
        <div class="part um"> <span data-href="#test">C3c</span></div>
        <div class="part" style="background:#00a070;"><span data-href="#test">C3d</span></div>

    </div>
    <div>

        <div class="part rm"> <span data-href="#test">C4a</span></div>
        <div class="part psm"><span data-href="#test">C4b</span></div>
        <div class="part" style="background:#00a070;"><span data-href="#test">C4c</span></div>
        <div class="part qm"> <span data-href="#test">C4d</span></div>

    </div>
    <div>

        <div class="part psm"><span data-href="#test">C5a</span></div>
        <div class="part ims" style="background: #f0e200;"><span data-href="#test">C5b</span></div>
        <div class="part qm"> <span data-href="#test">C5c</span></div>
        <div class="part pm"> <span data-href="#test">C5d</span></div>

    </div>
    <div>

        <div class="part qm"><span data-href="#test">C6a</span></div>
        <div class="part pm"><span data-href="#test">C6b</span></div>
        <div class="part" style="background:#00a070;"><span data-href="#test">C6c</span></div>
        <div class="part um"><span data-href="#test">C6d</span></div>

    </div>
</section>

body{
    background:#fff;
}

span{
    margin: 90px 0 0 20px;
    font-size:40px;
    float: left;
    line-height: 35px;
    text-decoration: none;
    color:#fff;
}

.ims > span{
    font-size:125px;
    margin: 120px 0px 0px 25px;
    text-align: center;
    float: left;
    font-weight: bold;
    text-decoration: none;
    color:#00a070;
}

.part{
    background: #00a070;
    width:275px;
    height:275px;
    float:left;
    margin:10px;
    font-family: Arial;
    cursor: pointer;
    user-select: none;
}

.viewport {
    perspective: 1300px;
    -webkit-perspective: 1300px;
    perspective-origin: 50% 0px;
    -webkit-perspective-origin: 50% 0px;
    transform: scale(0.45,0.45);
     -webkit-transform: scale(0.45,0.45);
      -ms-transform: scale(0.45,0.45);
}

.cube {
    margin: 0 auto;
    height: 600px;
    width: 600px;
    transition: transform 50ms linear;
    -webkit-transition: transform 50ms linear;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(45deg);
    -ms-transform: rotateX(-25deg) rotateY(45deg);
    -webkit-transform: rotateX(-25deg) rotateY(45deg);
}

.cube > div {
    position: absolute;
    height: 592px;
    width: 592px;
    padding: 5px;
    background-color: #fff;
    color: #fff;
}

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

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

.cube > div:nth-child(3) {
    transform: rotateY(90deg) translateZ(300px);
    -webkit-transform: rotateY(90deg) translateZ(300px);
    -ms-transform: rotateY(90deg) translateZ(300px);
}

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

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

.cube > div:nth-child(6) {
    transform: rotateX(-90deg) rotate(270deg) translateZ(300px);
     -webkit-transform: rotateX(-90deg) rotate(270deg) translateZ(300px);
     -ms-transform: rotateX(-90deg) rotate(270deg) translateZ(300px);
}