Astrology and Chinese Zodiac

Below are two different astrological charts and a series of images to populate each chart. Using css positions place each of the images into the correct location on the chart. Make the chart itself a background image of a parent div, and set the position of each of the 12 images within the parent. It is up to you to decide which chart to populate: Chinese or the western zodiac.

Zodiac 1

zodiac 1
zodiac 1 zodiac 2 zodiac 3 zodiac 4
zodiac 5 zodiac 6 zodiac 7 zodiac 8
zodiac 9 zodiac 10 zodiac 11 zodiac 12

Zodiac 2

zodiac 1
zodiac 1 zodiac 2 zodiac 3 zodiac 4
zodiac 5 zodiac 6 zodiac 7 zodiac 8
zodiac 9 zodiac 10 zodiac 11 zodiac 12

Finished Example

Here is the finished example of placing the 12 individual images onto the zodiac wheel background. I have placed a blue border around each image and element so you can see them. for clarification, all of the zodiac images have a "max-width" value of "50px" and a "transform" declaration with different "rotate(xxdeg)" where 'xx' is a number like this [ transform: rotate(-15deg); ]

Zodiac 1

zodiac 1 zodiac 2 zodiac 3 zodiac 4 zodiac 5 zodiac 6 zodiac 7 zodiac 8 zodiac 9 zodiac 10 zodiac 11 zodiac 12