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 | <style>
.TD-menu {display: block;}
.TD-menu li {display: inline-block;}
.TD-menu li a {
color: #FFFFFF;
background:#FF6600;
display: block;
text-decoration: none;
font-family: Arial;
overflow: visible;
line-height: 10px;
font-size: 14px;
padding: 15px 10px;}
.tdm {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .08s linear;
-moz-transition: all .08s linear;
transition: all .08s linear;
position: relative;}
.tdm:not(.active):hover {cursor: pointer;}
.tdm:not(.active):hover .tdm-box,
.tdm:not(.active):focus .tdm-box {
-moz-transform: translateZ(-20px) rotateX(90deg);
-webkit-transform: translateZ(-20px) rotateX(90deg);
-o-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);}
.tdm-box {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
-webkit-transform: translatez(-20px);
-moz-transform: translatez(-20px);
-o-transform: translatez(-20px);
transform: translatez(-20px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;}
.front {
-webkit-transform: rotatex(0deg) translatez(20px);
-moz-transform: rotatex(0deg) translatez(20px);
-o-transform: rotatex(0deg) translatez(20px);
transform: rotatex(0deg) translatez(20px);
background:#173374;
color: #FFFFFF;}
.down {
-webkit-transform: rotatex(-90deg) translatez(20px);
-moz-transform: rotatex(-90deg) translatez(20px);
-o-transform: rotatex(-90deg) translatez(20px);
transform: rotatex(-90deg) translatez(20px);
background:#661111;
color: #FFFFFF;}
.front, .down {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
-moz-box-sizing: border-box;
box-sizing: border-box;}
</style>
<ul class="TD-menu">
<li><a href="http://gadgetsforblogs3.blogspot.gr" class="tdm">HOME<span class="tdm-box">
<span class="front">HOME</span>
<span class="down">HOME</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-posts.html" class="tdm">MY POSTS<span class="tdm-box">
<span class="front">MY POSTS</span>
<span class="down">MY POSTS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-articles.html" class="tdm">MY ARTICLES<span class="tdm-box">
<span class="front">MY ARTICLES</span>
<span class="down">MY ARTICLES</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-links.html" class="tdm">MY LINKS<span class="tdm-box">
<span class="front">MY LINKS</span>
<span class="down">MY LINKS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-photos.html" class="tdm">MY PHOTOS<span class="tdm-box">
<span class="front">MY PHOTOS</span>
<span class="down">MY PHOTOS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-videos.html" class="tdm">MY VIDEOS<span class="tdm-box">
<span class="front">MY VIDEOS</span>
<span class="down">MY VIDEOS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-music.html" class="tdm">MY MUSIC<span class="tdm-box">
<span class="front">MY MUSIC</span>
<span class="down">MY MUSIC</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/forumchat.html" class="tdm">FORUM+CHAT<span class="tdm-box">
<span class="front">FORUM+CHAT</span>
<span class="down">FORUM+CHAT</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/radiotv.html" class="tdm">RADIO+TV<span class="tdm-box">
<span class="front">RADIO+TV</span>
<span class="down">RADIO+TV</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/news.html" class="tdm">NEWS<span class="tdm-box">
<span class="front">NEWS</span>
<span class="down">NEWS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-rss.html" class="tdm">RSS<span class="tdm-box">
<span class="front">RSS</span>
<span class="down">RSS</span></span></a></li></ul>
|
