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>