css3实现3D立体翻转效果

  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>

 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>