СПИСОК В 3D ВАРИАНТЕ
Вариант оформления списка в трехмерном стиле, используя всего один класс
transform-style: preserve-3d
Еще элемент списка
И еще элемент списка
|
1 2 3 4 5 6 7 |
<ul class="spisok-1"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ul> |
|
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 |
.spisok-1 { padding:0; list-style: none; margin: 0 10%; perspective: 1000px; transform-style: preserve-3d; } .spisok-1 li { text-align:center; margin: 18px 0; padding: 8px 26px; transition: all 0.3s; background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF); border: 2px solid #CFCFCF; color: #506a6b; transform-style: preserve-3d; box-shadow: 0px 0px 6px -2px #000000 inset; } .spisok-1 li:hover { border: 2px solid #77AEDB; transform: scale(1.1); background: linear-gradient(to left, #E4EFF8 0%, #FFF, #E4EFF8); box-shadow: 0px 0px 6px -2px #77AEDB inset; } .spisok-1 li:before, .spisok-1 li:after { content: ''; position: absolute; transition: all 0.3s; width:100%; height: 2000%; left: 0; top: 100%; background: linear-gradient(to top, #535353 80%, #818181 100%); transform-origin: 0% 0%; transform: rotateX(-90deg); pointer-events: none; } .spisok-1 li:hover:before, .spisok-1 li:hover:after { background: linear-gradient(to top, #255A85 80%, #337AB7 100%); } .spisok-1 li:after{ top: 0; } |
И еще один вариант, с противоположным эффектом.
СПИСОК В 3D ВАРИАНТЕ
Вариант оформления списка в трехмерном стиле, используя всего один класс
transform-style: preserve-3d
Еще элемент списка
И еще элемент списка
|
1 2 3 4 5 6 7 |
<ul class="spisok-2"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ul> |
|
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 |
.spisok-2 { padding:0; list-style: none; margin: 0 10%; perspective: 1000px; transform-style: preserve-3d; } .spisok-2 li { text-align:center; margin: 18px 0; padding: 8px 26px; transition: all 0.3s; background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF); border: 2px solid #CFCFCF; color: #506a6b; transform-style: preserve-3d; box-shadow: 0px 0px 6px -2px #000000 inset; } .spisok-2 li:hover { border: 2px solid #77AEDB; transform: scale(0.9); background: linear-gradient(to left, #E4EFF8 0%, #FFF, #E4EFF8); box-shadow: 0px 0px 6px -2px #77AEDB inset; } .spisok-2 li:before, .spisok-2 li:after { content: ''; position: absolute; transition: all 0.3s; width:100%; height: 2000%; left: 0; top: 100%; background: linear-gradient(to top, #535353 80%, #818181 100%); transform-origin: 0% 0%; transform: rotateX(-90deg); pointer-events: none; } .spisok-2 li:hover:before, .spisok-2 li:hover:after { background: linear-gradient(to top, #255A85 80%, #337AB7 100%); } .spisok-2 li:after{ top: 0; } |
Добрый день! Спасибо большое за статью! Подскажите пожалуйста, как при использовании Вашего "СПИСОК UL LI В 3D ВАРИАНТЕ" убрать размытие текста при хавере transform: scale(1.1);
Уже перепробовал и backface-visibility: hidden; и translateZ(0), но ничего не помогает...
Это от бразуеров зависит, у меня вот в Мозиле текст подпрыгивает даже немного, а в Хроме да, немного размывается.
Попробуйте вариант наоборот.
Т.е изначально будет transform: scale(0.9); а на ховере ставим в 1
Да, при меньшей разнице в scale размытие менее заметно. Но само размытие вызывает perspective. Я уже решил по другому данный момент. Спасибо за ответ!