Ajax Loader
×

CSS3 Rotating Menu

Here is a cool CSS3 menu which is a modified version of the original menu from CSS3Create. The menu is created using two parts, first is the "share" and second is the list of social links which is rotated to 180 degrees. The rotated part is hidden using a mask on top of the menu which is of the same color as the background.

The menu is animated using animation and keyframes properties. When the mouse is hovered on the "share" link, the menu rotates to 180 degrees and reveals the list of social links while the "share" link gets hidden under the mask. Then there is another animation when the mouse leaves the menu which turns it back to 360 degrees or 0 degrees so that it completes the whole rotation. This is very cool technique but it will only work in Webkit based browsers and Mozilla Firefox.

HTML 
<section id="article16" >
1
<section id="article16" >
2
  <dl class="menu">
3
    <dt class="btnRot">share</dt>
4
    <dd><a href="">Google+</a></dd>
5
    <dd><a href="">Delicious</a></dd>
6
    <dd><a href="">Facebook</a></dd>
7
    <dd><a href="">Twitter</a></dd>
8
  </dl>
9
  <div class="masque"></div>
10
  <div class="ombre"></div>
11
</section>
 
CSS 
/* CSS3 rotating menu
1
/* CSS3 rotating menu
2
   ==================================================
3
   ================================================== */
4
 
5
body {
6
    height: 360px;
7
    font-family: "helvetica",sans-serif;
8
    font-size: 1em;
9
    background: #627878;
10
    margin: 0px;
11
    padding: 0px;
12
}
13
 
14
#article16 {
15
  position: relative;
16
  width: 300px;
17
  margin: 0 auto;
18
}
19
20
#article16 dl {
21
    position: relative;
22
  width: 120px;
23
    top: 20px;
24
  margin: 0 auto;
25
  height: 155px;
26
    color: #324040;
27
    text-align: center;
28
    background: #04b3d2;
29
    /*linear-gradient*/
30
    background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));
31
    background: -webkit-linear-gradient(top,#04b3d2,#48dfff);
32
    background: -moz-linear-gradient(top,#04b3d2,#48dfff);
33
    background: -o-linear-gradient(top,#04b3d2,#48dfff);
34
    background: linear-gradient(top,#04b3d2,#48dfff);
35
    /*border-radius*/
36
    -webkit-border-radius: 4px;
37
    -moz-border-radius: 4px;
38
    border-radius: 4px;
39
    /*box-shadow*/
40
    -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
41
    -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
42
    box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
43
    /*transform-origin*/
44
    -webkit-transform-origin: 50% 120px;
45
    -moz-transform-origin: 50% 120px;
46
    -ms-transform-origin: 50% 120px;
47
    -o-transform-origin: 50% 120px;
48
    transform-origin: 50% 120px;
49
    /*transition*/
50
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
51
    -moz-transition: -moz-transform 0.7s ease-in-out;
52
    -o-transition: -o-transform 0.7s ease-in-out;
53
    transition: transform 0.7s ease-in-out;
54
    /*webkit plus*/
55
    /*animation*/
56
    -webkit-animation: bounceOut 0.7s ease-in-out;
57
    -moz-animation: bounceOut 0.7s ease-in-out;
58
    -ms-animation: bounceOut 0.7s ease-in-out;
59
    -o-animation: bounceOut 0.7s ease-in-out;
60
    animation: bounceOut 0.7s ease-in-out;
61
}
62
 
63
#article16 dt {
64
    position: absolute;
65
    bottom: 0px;
66
    width: 100%;
67
    height: 30px;
68
}
69
 
70
#article16 dd {
71
    /*transform*/
72
    -webkit-transform: rotate(180deg);
73
    -moz-transform: rotate(180deg);
74
    -ms-transform: rotate(180deg);
75
    -o-transform: rotate(180deg);
76
    transform: rotate(180deg);
77
}
78
 
79
#article16 dd a {
80
    display: block;
81
    height: 24px;
82
    padding: 3px 0px;
83
    color: #324040;
84
    text-decoration: none;
85
}
86
 
87
#article16 dd a:hover { background: rgba(255,255,255,0.1) }
88
 
89
#article16 dl:hover {
90
    /*transform*/
91
    -webkit-transform: rotate(-180deg);
92
    -moz-transform: rotate(-180deg);
93
    -ms-transform: rotate(-180deg);
94
    -o-transform: rotate(-180deg);
95
    transform: rotate(-180deg);
96
    /*transition*/
97
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
98
    -moz-transition: -moz-transform 0.5s ease-in-out;
99
    -o-transition: -o-transform 0.5s ease-in-out;
100
    transition: transform 0.5s ease-in-out;
101
    /*webkit plus*/
102
    /*animation*/
103
    -webkit-animation: bounceIn 0.7s ease-in-out;
104
    -moz-animation: bounceIn 0.7s ease-in-out;
105
    -ms-animation: bounceIn 0.7s ease-in-out;
106
    -o-animation: bounceIn 0.7s ease-in-out;
107
    animation: bounceIn 0.7s ease-in-out;
108
}
109
 
110
@-webkit-keyframes bounceIn {
111
    from { -webkit-transform: rotate(0deg) }
112
 
113
    75% { -webkit-transform: rotate(-200deg) }
114
 
115
    90% { -webkit-transform: rotate(-175deg) }
116
 
117
    to { -webkit-transform: rotate(-180deg) }
118
}
119
 
120
@-moz-keyframes bounceIn {
121
    from { -webkit-transform: rotate(0deg) }
122
 
123
    75% { -webkit-transform: rotate(-200deg) }
124
 
125
    90% { -webkit-transform: rotate(-175deg) }
126
 
127
    to { -webkit-transform: rotate(-180deg) }
128
}
129
 
130
@-o-keyframes bounceIn {
131
    from { -webkit-transform: rotate(0deg) }
132
 
133
    75% { -webkit-transform: rotate(-200deg) }
134
 
135
    90% { -webkit-transform: rotate(-175deg) }
136
 
137
    to { -webkit-transform: rotate(-180deg) }
138
}
139
 
140
@-ms-keyframes bounceIn {
141
    from { -webkit-transform: rotate(0deg) }
142
 
143
    75% { -webkit-transform: rotate(-200deg) }
144
 
145
    90% { -webkit-transform: rotate(-175deg) }
146
 
147
    to { -webkit-transform: rotate(-180deg) }
148
}
149
 
150
@-webkit-keyframes bounceOut {
151
    from { -webkit-transform: rotate(-360deg) }
152
 
153
    0% { -webkit-transform: rotate(-180deg) }
154
 
155
    10% { -webkit-transform: rotate(-160deg) }
156
 
157
    to { -webkit-transform: rotate(-360deg) }
158
}
159
 
160
@-moz-keyframes bounceOut {
161
    from { -webkit-transform: rotate(-360deg) }
162
 
163
    0% { -webkit-transform: rotate(-180deg) }
164
 
165
    10% { -webkit-transform: rotate(-160deg) }
166
 
167
    to { -webkit-transform: rotate(-360deg) }
168
}
169
 
170
@-o-keyframes bounceOut {
171
    from { -webkit-transform: rotate(-360deg) }
172
 
173
    0% { -webkit-transform: rotate(-180deg) }
174
 
175
    10% { -webkit-transform: rotate(-160deg) }
176
 
177
    to { -webkit-transform: rotate(-360deg) }
178
}
179
 
180
@-ms-keyframes bounceOut {
181
    from { -webkit-transform: rotate(-360deg) }
182
 
183
    0% { -webkit-transform: rotate(-180deg) }
184
 
185
    10% { -webkit-transform: rotate(-160deg) }
186
 
187
    to { -webkit-transform: rotate(-360deg) }
188
}
189
 
190
#article16 .masque {
191
    position: absolute;
192
    z-index: 50;
193
    width: 100%;
194
    height: 135px;
195
    top: 0;
196
    left: 0;
197
    background: #627878;
198
    /*linear-gradient*/
199
 
200
}
201
 
202
#article16 .ombre {
203
    position: relative;
204
    width: 300px;
205
    height: 6px;
206
  top: -22px;
207
    margin-top: -103px;
208
    left: 0px;
209
    /*box-shadow*/
210
    -webkit-box-shadow: 0px 100px 3px black;
211
    -moz-box-shadow: 0px 100px 3px black;
212
    box-shadow: 0px 100px 3px black;
213
    /*border-radius*/
214
    -webkit-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;
215
    -moz-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;
216
    border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;
217
}
 

CSS3 Rotating Menu

CSSDeck G+