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

これは、3d-cube が chrome と safari では正しく動作するが、IE10 では動作しないコードです。Transform-style:presev-3d, preservative:1300px,preservative-origin:50% 300px; を見つけました。IE10では動作しません。このような IE10 で動作するソリューションまたは代替プロパティはありますか?

JsFiddle リンクを表示して、私を助けてください。jsfiddle ありがとうShesh

4

2 に答える 2

1

preserve-3d は IE10 ではサポートされていませんが、他の現在のバージョンのブラウザーではサポートされています。http://caniuse.com/transforms3dを参照してください。

これに対する回避策は、MSDN Web サイトに記載されています。

注: W3C 仕様では、preserve-3dこのプロパティのキーワード値を定義しています。これは、フラット化が実行されないことを示します。現時点では、Internet Explorer 10 はpreserve-3dキーワードをサポートしていません。これを回避するには、子要素の通常の変換に加えて、親要素の変換を各子要素に手動で適用します。

リンクを発見した Rob の功績は認められます。

于 2013-08-10T12:27:19.620 に答える