css3实现3D立体翻转效果

1、在IE下无法显示翻转效果，火狐和谷歌可以

 /*样式css*/

 .nav-menu  li {

     display: inline;

 }

 .nav-menu li a {

     color: #fff;

     display: block;

     text-decoration: none;

     overflow: visible;

     line-height: 40px;

     font-size: 20px;

     width:200px;

     height: 50px;

     perspective: 2000px;

 }

 .three-d {

     -webkit-perspective: 200px;

     -moz-perspective: 200px;

     -ms-perspective: 200px;

     -o-perspective: 200px;

     perspective: 200px;

     -webkit-transition: all .07s linear;

      -moz-transition: all .07s linear;

      -ms-transition: all .07s linear;

      -o-transition: all .07s linear;

      transition:all .7s linear;

     position: relative;

 }

 .three-d:not(.active):hover {

     cursor: pointer;

 }

 .three-d:not(.active):hover .three-d-box,  .three-d:not(.active):focus .three-d-box {

     -wekbit-transform: translateZ(-25px) rotateX(90deg);

      -moz-transform: translateZ(-25px) rotateX(90deg);

      -o-transform: translateZ(-25px) rotateX(90deg);

      -ms-transform: translateZ(-25px) rotateX(90deg);

      transform: translateZ(-25px) rotateX(90deg);

 }

 .three-d-box {

     -webkit-transition: all .3s ease-out;

      -moz-transition: all .3s ease-out;

      -ms-transition: all .3s ease-out;

      -o-transition: all .3s ease-out;

      transition: all .3s ease-out;

     -webkit-transform: translatez(-25px);

     -moz-transform: translatez(-25px);

     -ms-transform: translatez(-25px);

     -o-transform: translatez(-25px);

     transform: translatez(-25px);

     -webkit-transform-style: preserve-3d;

     -moz-transform-style: preserve-3d;

     -ms-transform-style: preserve-3d;

     -o-transform-style: preserve-3d;

     transform-style: preserve-3d;

     -webkit-pointer-events: none;

     -moz-pointer-events: none;

     -ms-pointer-events: none;

     -o-pointer-events: none;

     pointer-events: none;

     position: absolute;

     top: 0;

     left: 0;

     display: block;

     width: 100%;

     height: 100%;

 }

 .content{

     -webkit-transform: rotatex(0deg) translatez(25px);

     -moz-transform: rotatex(0deg) translatez(25px);

     -ms-transform: rotatex(0deg) translatez(25px);

     -o-transform: rotatex(0deg) translatez(25px);

     transform: rotatex(0deg) translatez(25px);

 }

 .content-hover{

     -webkit-transform: rotatex(-90deg) translatez(25px);

     -moz-transform: rotatex(-90deg) translatez(25px);

     -ms-transform: rotatex(-90deg) translatez(25px);

     -o-transform: rotatex(-90deg) translatez(25px);

     transform: rotatex(-90deg) translatez(25px);

     color: #FFE7C4;

 }

 .content{

     width:200px;

     height: 50px;

     border:1px solid #10adf2;

     color:#059dd9;

     font-size: 30px;

     cursor: pointer;

     -webkit-pointer-events: none;

     -moz-pointer-events: none;

     -ms-pointer-events: none;

     -o-pointer-events: none;

     pointer-events: none;

     -webkit-box-sizing: border-box;

     box-sizing: border-box;

     text-align: center;

     line-height: 50px;

 }

 .content-hover {

     width:200px;

     height: 50px;

     padding:0 10px;

     color:#059dd9;

     font-size: 30px;

     cursor: pointer;

     position: absolute;

     top: 0px;

     left: 0;

     background: #10adf2;

     color: white;

     pointer-events: none;

     -webkit-pointer-events: none;

     -moz-pointer-events: none;

     -ms-pointer-events: none;

     -o-pointer-events: none;

     pointer-events: none;

     -webkit-box-sizing: border-box;

     box-sizing: border-box;

     text-align: center;

     line-height: 50px;

 }

 .hidden{

     display: none;

 }

 /*html*/

  <ul class="nav-menu">

        <li><a href="#" class="three-d">

            <div class="hidden">3D</div>

            <span class="three-d-box">

                <div class="content">

                    3D翻转

             </div>

                 <div class="content-hover">

                     3D立体翻转

              </div>

            </span>

        </a>

    </li>

   </ul>

2、在火狐、谷歌和IE11在均测试过可以

 /*样式css*/

 .content-1{

 width:200px;

     height: 50px;

     color:transparent;

     font-size: 30px;

     cursor: pointer;

     text-align: center;

     line-height: 50px;

     margin:50px 0 0 0;

     position: relative;

 }

 .content-1:before{

     content:"3D翻转";

     -webkit-font-smoothing:antialiased;

     position: absolute;

     top: 0px;

     left: 0px;

     bottom: 0px;

     right: 0px;

     display: block;

     color: #059dd9;

     line-height: 50px;

     border:1px solid #10adf2;

     -webkit-transform-origin:50% 50% -25px;

     transform-origin:50% 50% -25px;

     -ms-transform-origin:50% 50% -25px;

     transition:0.3s;

 }

 .content-1:after{

     content:"3D立体翻转";

     -webkit-font-smoothing:antialiased;

     position: absolute;

     top: 0px;

     left: 0px;

     bottom: 0px;

     right: 0px;

     color:white;

     line-height: 50px;

     background: #10adf2;

     -webkit-transform-origin:50% 50% -25px;

     transform-origin:50% 50% -25px;

     -ms-transform-origin:50% 50% -25px;

     transition:0.3s;

     -webkit-transform:rotateX(-90deg);

     transform:rotateX(-90deg);

     -ms-transform:rotateX(-90deg);

 }

 .content-1:hover:before{

     -webkit-transform:rotateX(90deg);

     transform:rotateX(90deg);

     -ms-transform:rotateX(90deg);

 }

 .content-1:hover:after{

     -webkit-transform:rotateX(0);

     transform:rotateX(0);

     -ms-transform:rotateX(0);

 }

 /*html*/

 <div class="content-1">

       3D翻转

   </div>