.box-container {
    padding: 14px 10px;
    .box-wrapper {
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
      perspective: 800px;
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      position: relative;
      .box-front, .box-back {
        background: #fff;
        border-radius: 10px;
        border: 2px solid #3380e7;
        position: absolute;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
      }
      .box-front {
        position: relative;
        width: 100%;
        text-align: center;
        .header {
          width: 100%;
          height: auto;
          padding: 40px 0 30px 0;
          border-radius: ~'0 0 50% 50%/0 0 15% 15%;';
          background: linear-gradient(90deg, #3977e2, #13a9ff);
        }
        .position{
          padding: 15px 20px;
          min-height: 120px;
        }
      }
      .box-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        display: flex;
        align-items: center;
        .hb {
          padding: 30px 30px 10px 30px;
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }
    .flipped .box-back {
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      transform: rotateY(0deg);
      //animation: rotateBack .4s linear 1;
      //-wbkit-animation: rotateBack .4s linear 1;
      //animation-fill-mode: forwards;
      //-webkit-animation-fill-mode: forwards;
      box-shadow: 0 0 16px rgba(0, 93, 208, .4);
    }
    .flipped .box-front {
      //animation: rotate .4s linear 1;
      //-wbkit-animation: rotate .4s linear 1;
      //animation-fill-mode: forwards;
      //-webkit-animation-fill-mode: forwards;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
  }

<div class=" box-container ">
                <div class="box-wrapper">
                    <div class="box-front text-center">
                        <div class="header">
                            <img class="photo" src="images/photo01.png">
                            <h3 class="text-blue name text-white">陳澤暉</h3>
                        </div>
                        <p class="text-center position">CMA、力拓集團中國區(qū)首席經(jīng)濟顧問</p>
                    </div>
                    <div class="box-back">
                        <p class="hb">
                            財務(wù)管理人員不僅能夠具備綜合的財務(wù)知識，同時還要了解企業(yè)銷售、生產(chǎn)、運營等各個環(huán)節(jié)，為企業(yè)經(jīng)營決策提供全方位的分析。這就是所謂的復(fù)合型人才。而CMA的知識體系，恰恰符合財務(wù)管理人員對于“復(fù)合”與“前瞻”兩者的訴求。</p>
                        <!--<div class="ft">-->
                        <!--<p class="text-white text-m text-center">陳澤暉</p>-->
                        <!--<p class="text-white text-center">CMA、力拓集團中國區(qū)首席經(jīng)濟顧問</p>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>

其他瀏覽器都沒有問題 但是ie11上的效果是為什么的 沒有顯示翻轉(zhuǎn)的過程 感覺是沒有