Question

卡片翻转在所有浏览器中工作正常，但在IE10中它不顺利，悬停后背面的内容旋转180度。

我在google上搜索了很多但是我没有修复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

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

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

Answer 2

这是一个没有transform-style: preserve-3d的小提琴：

http://jsfiddle.net/myTerminal/ENkt2/29/

它使用opacity代替IE10。

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

2 个答案: