html - 卡片翻转在 IE10 中无法正常工作

Question

卡片翻转在所有浏览器中都可以正常工作，但在 IE10 中效果不佳，悬停后背面的内容旋转了 180 度。

我在谷歌上搜索了很多，但我没有找到任何针对 IE10 的修复程序，这是我的代码

HTML

  <div class="flip-container">
     <div class="flipper">
        <div class="front">
          <h2>Front content</h2>
        </div>
        <div class="back">
          <h2>Back content</h2>
        </div>
     </div>
  </div> 

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

Demo on fiddle

Answer 1

嘿伙计们，我通过为 IE10 使用 preserve-3d 得到了另一个解决方案，所以这段代码将适用于所有浏览器。这是我的代码。

HTML 结构

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

CSS

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

Demo on jsfiddle