-1 
<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>

CSS

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);
}

这是适用于 chrome 和 safari 但不适用于 IE10 的 3d-cube 代码。我发现 Transform-style:presev-3d, preservative:1300px,preservative-origin:50% 300px; 不适用于 IE10。任何像这样在 IE10 中工作的解决方案或替代属性？

请查看 JsFiddle 链接并帮助我。jsfiddle 谢谢谢什

4

2 回答 2

1

IE10 不支持 preserve-3d，但在其他当前版本的浏览器中。请参阅http://caniuse.com/transforms3d。

MSDN 网站上说明了解决方法：

注意：W3C 规范为此属性定义了一个关键字值 of preserve-3d，表示不执行展平。目前，Internet Explorer 10 不支持该preserve-3d关键字。除了子元素的正常变换之外，您可以通过手动将父元素的变换应用于每个子元素来解决此问题。

归功于 Rob 发现了链接。

于 2013-08-10T12:27:19.620 回答
0

preserve-3d在 IE11 及以下版本中不可用。它正在开发中并包含在 IE for Windows 10 Technical Preview 中

资料来源：http ://status.modern.ie/

博客文章：http: //blogs.msdn.com/b/ie/archive/2014/11/11/living-on-the-edge-our-next-step-in-interoperability.aspx

于 2014-04-03T07:10:08.657 回答