Вертикальное 3D меню на чистом CSS
|
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 |
.mainNav { float: left; transform: perspective(500px); transform-style: preserve-3d; } .mainNav ul { list-style: none; padding: 0; } .mainNav a { background-color: #6cf; background-image: linear-gradient(hsla(0, 0%, 100%, .05), hsla(0, 0%, 0%, .05)), linear-gradient(-72deg, hsla(0, 0%, 100%, .05) 50%, transparent 50%); backface-visibility: hidden; box-shadow: inset 0 0 .25em hsla(0, 0%, 0%, .1), inset 0 0 1.5em hsla(0, 0%, 0%, .25); color: #333; display: block; font: bold 1em/3 sans-serif; padding: 0 1.5em; position: relative; text-align: center; text-decoration: none; text-shadow: 0 1px 1px hsla(0, 0%, 100%, .25); transition: .5s; transform-origin: 50% 0; transform-style: preserve-3d; width: 6em; } .mainNav a:after { background-color: inherit; background-image: linear-gradient(hsla(0, 0%, 100%, .05), hsla(0, 0%, 0%, .05)), linear-gradient(-72deg, hsla(0, 0%, 100%, .05) 50%, transparent 50%), linear-gradient(hsla(0, 0%, 0%, .25), hsla(0, 0%, 0%, .25)); box-shadow: inset 0 0 .25em hsla(0, 0%, 0%, .2), inset 0 0 1.5em hsla(0, 0%, 0%, .3); bottom: 0; color: #fff; content: attr(data-title); left: 100%; line-height: 3; position: absolute; top: 0; transform: rotateY(90deg); transform-origin: 0 0; width: 100%; } .mainNav a:before { background-color: inherit; background-image: linear-gradient(hsla(0, 0%, 100%, .07), hsla(0, 0%, 0%, .07)), linear-gradient(hsla(0, 0%, 0%, .5), hsla(0, 0%, 0%, .5)); bottom: 0; content: ''; height: 9em; left: 100%; position: absolute; top: 0; transform-origin: 0 0; width: 100%; } .mainNav li:nth-child(-n+2) a:before { transform: rotateX(-90deg) translateX(-9em) translateZ(3em); } .mainNav li:nth-child(n+3) a:before { transform: rotateX(-90deg) translateX(-9em); } .mainNav li:hover a { transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em); z-index: 10; } |
|
1 2 3 4 5 6 7 8 9 |
<nav class="mainNav"> <ul> <li><a href="#" data-title="Главная">Главная</a></li> <li><a href="#" data-title="О нас">О нас</a></li> <li><a href="#" data-title="Клиенты">Клиенты</a></li> <li><a href="#" data-title="Вакансии">Вакансии</a></li> <li><a href="#" data-title="Контакты">Контакты</a></li> </ul> </nav> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Хотел глянуть демо меню, а мне там демо сферы показывает из этого материала
Да, спасибо, мой косяк. Что интересно, ссылка на ДЕМО была неправильная, но вот на тестирование в редакторе вела по нужному пути. В общем, исправил 🙂