CODEWITHSUNDEEP
jqueryhtmlcss
Patch
Patch

Reputation: 2507

Transform (rotate) background image with jQuery?

I have a menu system where when you click on a link, sub-headings will slide down beneath them. I have this fine, however I want to add an arrow, set as a background image to list items, that animatedly rotates 90 degrees when active. So, my question is as follows: How can I transform (rotate) a background image without rotating the whole list item?

Cheers, BlackWraith

Upvotes: 1

Views: 2053

Answers (1)

iHaveacomputer
iHaveacomputer

Reputation: 1437

I don't think you can just rotate the background-image by itself. What you have to do is declare another <span style="display:block;width:16px;height:16px; background:url(my_arrow.png);"> element inside your <li> and then rotate the whole <span>.

Usually people just use a single sprite and background-position to change the arrow from ► to ▼ in nested lists.

Upvotes: 2

Related Questions