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