Какой CSS я могу использовать для эффекта Кривой элемент списка?

Question

Я хочу поместить изогнутый 3d-вид в элемент списка, который появляется у меня, когда вы наводите курсор на элемент списка на боковой панели.

Как бы я сделал это с CSS?

EDIT ::

У меня есть список в боковой панели.

При наведении курсора на ссылку мне бы хотелось, чтобы она выглядела так, как будто она написана на изогнутой поверхности цилиндра

Answer 1

Вы можете изменить фон элемента списка, чтобы он содержал трехмерное изогнутое изображение

 li:hover{
  background: url(/images/curved3Dbackground.png);
 }

Поскольку IE6 поддерживает только этот тип наведения на элементы привязки, вы можете применить наведение на привязку внутри элемента списка

HTML

<li><a href="link.html">Text</a></li>

CSS

 li a:hover{
  background: url(/images/curved3Dbackground.png);
 }

Answer 2

Я думаю, вам понадобится фоновое изображение для этого. Все браузеры поддерживают атрибут hover для тега привязки (который, я сомневаюсь, вы используете для своего контейнера меню), но некоторые более новые поддерживают атрибуты: hover для всех элементов. Я знаю, что Firefox поддерживает это

div:hover{background-image:url(myImage.png);}

Тогда просто сделайте фоновое изображение своей 3d пышной фигурой.

Answer 3

Простой эффект наведения, который вы просто делаете с помощью OnMouseOver и OnMouseOut ...

Подробнее:

http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/

Итак:

• получить базовое изображение
• получить 3d изображение
• При наведении мыши на элемент -> OnMouseOver установить 3D-изображение
• Когда мышкой достать предмет -> OnMosueOut, вернуть обратно основное изображение