3D меню на 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 |
ul { position: relative; -moz-transform: rotate(-35deg) skew(20deg, 5deg); -ms-transform: rotate(-35deg) skew(20deg, 5deg); -webkit-transform: rotate(-35deg) skew(20deg, 5deg); transform: rotate(-35deg) skew(20deg, 5deg); list-style: none; } .list-item { background: #000000; color: #575757; text-align: center; height: 2.5em; width: 4em; vertical-align: middle; line-height: 2.5em; border-bottom: 1px solid #060606; position: relative; display: block; text-decoration: none; list-style: none; -moz-box-shadow: -2em 1.5em 0 #e1e1e1; -webkit-box-shadow: -2em 1.5em 0 #e1e1e1; box-shadow: -2em 1.5em 0 #e1e1e1; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .list-item:hover { background: #ff6e42; color: #fffcfb; -moz-transform: translate(0.9em, -0.9em); -ms-transform: translate(0.9em, -0.9em); -webkit-transform: translate(0.9em, -0.9em); transform: translate(0.9em, -0.9em); -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; -moz-box-shadow: -2em 2em 0 #e1e1e1; -webkit-box-shadow: -2em 2em 0 #e1e1e1; box-shadow: -2em 2em 0 #e1e1e1; } .list-item:hover:before, .list-item:hover:after { -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .list-item:hover:before { background: #b65234; width: 1em; top: 0.5em; left: -1em; } .list-item:hover:after { background: #b65234; width: 1em; bottom: -2.5em; left: 1em; height: 4em; } .list-item:before, .list-item:after { -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .list-item:after { content:""; position: absolute; height: 4em; background: #181818; width: 0.5em; bottom: -2.25em; left: 1.5em; -moz-transform: rotate(90deg) skew(0deg, 45deg); -ms-transform: rotate(90deg) skew(0deg, 45deg); -webkit-transform: rotate(90deg) skew(0deg, 45deg); transform: rotate(90deg) skew(0deg, 45deg); } .list-item:before { content:""; position: absolute; height: 2.5em; background: #121212; width: 0.5em; top: 0.25em; left: -0.5em; -moz-transform: skewY(-45deg); -ms-transform: skewY(-45deg); -webkit-transform: skewY(-45deg); transform: skewY(-45deg); } |
|
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 |
<center> <ul> <li> <a class='list-item' href=''> <i class='icon-reorder'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-th-large'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-bar-chart'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-tasks'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-bell'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-archive'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-comment'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-sitemap'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-thumbs-up'></i> </a> </li> <li> <a class='list-item' href=''> <i class='icon-tumblr'></i> </a> </li> </ul> </center> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
