Html 卡片翻转不'；在IE10中不能正常工作

Card flip在所有浏览器中都可以正常工作，但在IE10中，在悬停后，背面的内容会旋转180度

我在谷歌上搜索了很多，但我还没有得到IE10的任何修复。这是我的代码

HTML

---

这是一把没有变换样式的小提琴：preserve-3d：

---

它使用了

不透明度

，并在IE10上工作。

嘿，伙计们，我通过在IE10上使用preserve-3d获得了另一个解决方案，因此该代码将在所有浏览器中工作。这是我的密码

HTML结构

 <div class="flip-container">
    <div class="flipper">
        <div class="front">
            front
        </div>
        <div class="back">
            back
        </div>
    </div>
 </div>

---

您正在CSS中使用

变换样式：preserve-3d

。IE还不支持该属性。也，我建议在使用供应商前缀（如

-webkit-

）时，将不带前缀的标准属性放在供应商前缀之后，以便在支持时最后提取。我在供应商前缀之后添加了标准属性，但我还没有得到解决方案，因为Keith为IE尚不支持变换样式属性。另请参见。已经发布了一个解决方案。为什么不考虑上下投票呢？有很多重构可以做，很多不需要的是CSS，但是你有一个工作解决方案。

 .flip-container {
            perspective: 1000;
           -webkit-perspective: 1000;
           -moz-perspective: 1000;
           -o-perspective: 1000;
      }

 .flip-container:hover .flipper, .flip-container.hover .flipper {
          transform: rotateY(180deg);
           -webkit-transform: rotateY(180deg);
           -moz-transform: rotateY(180deg);
           -ms-transform: rotateY(180deg);
           -o-transform: rotateY(180deg);
}

     .flip-container, .front, .back {
         width: 200px;
         height: 200px;
             border-radius:50%;

        }

     .flipper {
       transition: 0.6s;
           -webkit-transition: 0.6s;
           -moz-transition: 0.6s;
           -ms-transition: 0.6s;
           -o-transition: 0.6s;

       transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           position: relative;
    }

    .flipper h2{
           margin: 80px 0 0 30px;
     }

     .front, .back {
       backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;

              background:#f2f2f2;
              border:1px solid #ccc;
          position: absolute;
          top: 0;
          left: 0;

    }

  /* front pane, placed above back */
    .front {
     z-index: 2;
     }

 .back {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
        }

 <div class="flip-container">
    <div class="flipper">
        <div class="front">
            front
        </div>
        <div class="back">
            back
        </div>
    </div>
 </div>

   .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -o-perspective:1000;
        -ms-perspective: 1000;
        perspective: 1000;

        -ms-transform: perspective(1000px);
        -moz-transform: perspective(1000px);
        -moz-transform-style: preserve-3d; 
        -ms-transform-style: preserve-3d; 

    }



        /* for IE */
    .flip-container:hover .back, .flip-container.hover .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    .flip-container:hover .front, .flip-container.hover .front {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    /* END: for IE */


    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -ms-transition: 0.6s;

        -moz-transition: 0.6s;
        -moz-transform: perspective(1000px);
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
        top: 0;
        left: 0;
        width: 180px;
        height: 180px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;

        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;

        -o-transition: 0.6s;
        -o-transform-style: preserve-3d;

        -ms-transition: 0.6s;
        -ms-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;

        position: absolute;
        top: 0;
        left: 0;
        width: 180px;
        height: 180px;


    }

    .front {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        background-position: center center;
        z-index: 2;
        background:green;
    }

    .back {
        background: #f2f2f2;
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(-180deg);
    }