Slide show

3d menu


3d menu who can play as widget

Source code
----------------------------------------------

<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>


----------------------------------------------------------------
Resource http://the-best-widgets.blogspot.gr/


NEW !!! You can actively participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here

Links: You can download the best WordPress Woocommerce templates HERE


No comments:

Post a Comment