1、在IE下无法显示翻转效果，火狐和谷歌可以
1 /*样式css*/ 2 3 .nav-menu li { 4display: inline; 5 } 6 .nav-menu li a { 7color: #fff; 8display: block; 9text-decoration: none; 10overflow: visible; 11line-height: 40px; 12font-size: 20px; 13width:200px; 14height: 50px; 15perspective: 2000px; 16 } 17 .three-d { 18-webkit-perspective: 200px; 19-moz-perspective: 200px; 20-ms-perspective: 200px; 21-o-perspective: 200px; 22perspective: 200px; 23-webkit-transition: all .07s linear; 24-moz-transition: all .07s linear; 25-ms-transition: all .07s linear; 26-o-transition: all .07s linear; 27transition:all .7s linear; 28position: relative; 29 } 30 .three-d:not(.active):hover { 31cursor: pointer; 32 } 33 .three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box { 34-wekbit-transform: translateZ(-25px) rotateX(90deg); 35-moz-transform: translateZ(-25px) rotateX(90deg); 36-o-transform: translateZ(-25px) rotateX(90deg); 37-ms-transform: translateZ(-25px) rotateX(90deg); 38transform: translateZ(-25px) rotateX(90deg); 39 } 40 .three-d-box { 41-webkit-transition: all .3s ease-out; 42-moz-transition: all .3s ease-out; 43-ms-transition: all .3s ease-out; 44-o-transition: all .3s ease-out; 45transition: all .3s ease-out; 46-webkit-transform: translatez(-25px); 47-moz-transform: translatez(-25px); 48-ms-transform: translatez(-25px); 49-o-transform: translatez(-25px); 50transform: translatez(-25px); 51-webkit-transform-style: preserve-3d; 52-moz-transform-style: preserve-3d; 53-ms-transform-style: preserve-3d; 54-o-transform-style: preserve-3d; 55transform-style: preserve-3d; 56-webkit-pointer-events: none; 57-moz-pointer-events: none; 58-ms-pointer-events: none; 59-o-pointer-events: none; 60pointer-events: none; 61position: absolute; 62top: 0; 63left: 0; 64display: block; 65width: 100%; 66height: 100%; 67 } 68 .content{ 69-webkit-transform: rotatex(0deg) translatez(25px); 70-moz-transform: rotatex(0deg) translatez(25px); 71-ms-transform: rotatex(0deg) translatez(25px); 72-o-transform: rotatex(0deg) translatez(25px); 73transform: rotatex(0deg) translatez(25px); 74 } 75 .content-hover{ 76-webkit-transform: rotatex(-90deg) translatez(25px); 77-moz-transform: rotatex(-90deg) translatez(25px); 78-ms-transform: rotatex(-90deg) translatez(25px); 79-o-transform: rotatex(-90deg) translatez(25px); 80transform: rotatex(-90deg) translatez(25px); 81color: #FFE7C4; 82 } 83 .content{ 84width:200px; 85height: 50px; 86border:1px solid #10adf2; 87color:#059dd9; 88font-size: 30px; 89cursor: pointer; 90-webkit-pointer-events: none; 91-moz-pointer-events: none; 92-ms-pointer-events: none; 93-o-pointer-events: none; 94pointer-events: none; 95-webkit-box-sizing: border-box; 96box-sizing: border-box; 97text-align: center; 98line-height: 50px; 99 }100 .content-hover {101width:200px;102height: 50px;103padding:0 10px;104color:#059dd9;105font-size: 30px;106cursor: pointer;107position: absolute;108top: 0px;109left: 0;110background: #10adf2;111color: white;112pointer-events: none;113-webkit-pointer-events: none;114-moz-pointer-events: none;115-ms-pointer-events: none;116-o-pointer-events: none;117pointer-events: none;118-webkit-box-sizing: border-box;119box-sizing: border-box;120text-align: center;121line-height: 50px;122 }123 .hidden{124display: none;125 }126 127 128 129 /*html*/130 131 <ul class="nav-menu">132 <li><a href="#" class="three-d"> 133 <div class="hidden">3D</div>134 <span class="three-d-box">135<div class="content">1363D翻转137 </div>138 <div class="content-hover">139 3D立体翻转140 </div>141 </span> 142 </a>143 </li>144 </ul>
View Code
2、在火狐、谷歌和IE11在均测试过可以
1 /*样式css*/ 2 .content-1{ 3 width:200px; 4height: 50px; 5color:transparent; 6font-size: 30px; 7cursor: pointer; 8text-align: center; 9line-height: 50px;10margin:50px 0 0 0;11position: relative;12 }13 .content-1:before{14content:"3D翻转";15-webkit-font-smoothing:antialiased;16position: absolute;17top: 0px;18left: 0px;19bottom: 0px;20right: 0px;21display: block;22color: #059dd9;23line-height: 50px;24border:1px solid #10adf2;25-webkit-transform-origin:50% 50% -25px;26transform-origin:50% 50% -25px;27-ms-transform-origin:50% 50% -25px;28transition:0.3s;29 }30 .content-1:after{31content:"3D立体翻转";32-webkit-font-smoothing:antialiased;33position: absolute;34top: 0px;35left: 0px;36bottom: 0px;37right: 0px;38color:white;39line-height: 50px;40background: #10adf2;41-webkit-transform-origin:50% 50% -25px;42transform-origin:50% 50% -25px;43-ms-transform-origin:50% 50% -25px;44transition:0.3s;45-webkit-transform:rotateX(-90deg);46transform:rotateX(-90deg);47-ms-transform:rotateX(-90deg);48 }49 .content-1:hover:before{50-webkit-transform:rotateX(90deg);51transform:rotateX(90deg);52-ms-transform:rotateX(90deg);53 }54 .content-1:hover:after{55-webkit-transform:rotateX(0);56transform:rotateX(0);57-ms-transform:rotateX(0);58 }59 60 61 /*html*/62 63 <div class="content-1">64 3D翻转65 </div>
View Code
