大量的jQuery代码动画库再网上涌现，对于喜欢酷炫效果的前端人员来说，是个学习的大好机会，整理到博客的目的不是抄袭而是方便以后学习和使用，因此不作版权声明
效果如下，hover时，会有菜单扭动效果
html
|
|
css
接着放css，详细操控见代码注释
js
最后，通过js控制data-rotate的值，实现角度的变化,当然这里用到了jquery
'有趣的css3菜单'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*这些就是reset了*/
*{
margin:0;
padding:0;
}
body{
color:#fff;
background:#2c3e50;
font-size: 12px;
min-width: 800px;
display: block;
position: relative;
}
.wrap{
/**
3D元素距离视图的距离，其子元素会获得透视效果，
与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
*/
-webkit-perspective: 2000px;
perspective: 2000px;
-webkit-perspective-origin: center center;
perspective-origin: center center;
width:200px;
height:320px;
position:absolute;
top:50px;
left:50px;
}
.cube{
width:100%;
height:50px;
margin:0 0 0 0;
position:relative;
/*3d变化效果*/
-webkit-transition:.25s all ease-out;
transition:.25s all ease-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
font-family: arial, helvetica, sans-serif;
text-align: center;
line-height: 4.5;
}
/*纯粹为了3d的层次感，由于设置了perspective，index用来控制大小，增加性能*/
#a{z-index:1;}
#b{z-index:2;}
#c{z-index:3;}
#d{z-index:4;}
#e{z-index:3;}
#f{z-index:2;}
#g{z-index:1;}
/*用以操作旋转效果*/
.cube[data-rotate='1']{
-webkit-transform: rotateY(3deg) translateZ(-00px) translateX(0px);
transform: rotateY(3deg) translateZ(-00px) translateX(0px);
}
.cube[data-rotate='2']{
-webkit-transform: rotateY(6deg) translateZ(-00px) translateX(0px);
transform: rotateY(6deg) translateZ(-00px) translateX(0px);
}
.cube[data-rotate='3']{
-webkit-transform: rotateY(9deg) translateZ(-00px) translateX(0px);
transform: rotateY(9deg) translateZ(-00px) translateX(0px);
}
.cube[data-rotate='4']{
-webkit-transform: rotateY(12deg) translateZ(-00px) translateX(0px);
transform: rotateY(12deg) translateZ(-00px) translateX(0px);
}
.cube[data-rotate='5']{
-webkit-transform: rotateY(15deg) translateZ(-00px) translateX(0px);
transform: rotateY(15deg) translateZ(-00px) translateX(0px);
}
.cube[data-rotate='6']{
-webkit-transform: rotateY(18deg) translateZ(-00px) translateX(0px);
transform: rotateY(18deg) translateZ(-00px) translateX(0px);
}
.side{
width:100%;
height:100%;
position:absolute;
/*隐藏背面*/
backface:hidden;
}
/*多个面的样式*/
.front {
height:50px;
-webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
}
.left {
height:50px;
-webkit-transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
}
.right {
height:50px;
-webkit-transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
}
.back {
height:50px;
-webkit-transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);
}
.top {
height:200px;
-webkit-transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px);
transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px);
}
.bottom {
height:200px;
-webkit-transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px);
transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px);
}
#a .side{ background:#16a085; }
#a .front{ background:#1abc9c; }
#b .side{ background:#27ae60; }
#b .front{ background:#2ecc71; }
#c .side{ background:#2980b9; }
#c .front{ background:#3498db; }
#d .side{ background:#8e44ad; }
#d .front{ background:#9b59b6; }
#e .side{ background:#f39c12; }
#e .front{ background:#f1c40f; }
#f .side{ background:#d35400; }
#f .front{ background:#e67e22; }
#g .side{ background:#c0392b; }
#g .front{ background:#e74c3c; }
1
2
3
4
5
6
7
8
9
10
11
12
var $el = $(".cube");
var rotate = function(index){
var index = index || 0;
$el.each(function(e){
$(this).attr("data-rotate",Math.abs($(this).index() - index));
});
}
$el.hover(function(e){
var index = $(this).index();
rotate(index);
});
rotate(0);