How to rotate images in circular path like this in blogger dynamic view template

Question

enter image description here

How to rotate images in circular path like this in blogger dynamic view template and when i click any image in circular path it should open the specified link

Possible duplicate of [Position icons into circle](http://stackoverflow.com/questions/12813573/position-icons-into-circle) — madalinivascu, Nov 08 '16 at 11:28

Jerry Chin · Answer 1 · 2016-11-08T12:21:29.813

I'm not 100% sure what blogger dynamic view template is, but if you can write custom CSS3 + HTML tags, the following code should suffice.

Screenshot first:

What it does is basically rotating the image infinite times while make every circle icon of the image clickable. :

<html>
<head>
    <style type="text/css">
        @keyframes myfirst
        {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }

        img {
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-play-state: running;
        }
    </style>

</head>
<body>
    <img src="pic.png" usemap ="#planetmap"/>
    <map name="planetmap">
      <area shape="circle" coords="67,95,40" href="example.com"/>
      <area shape="circle" coords="177,60,40" href="example.com"/>
      <area shape="circle" coords="244,150,40" href="example.com"/>
      <area shape="circle" coords="69,211,40" href="example.com"/>
      <area shape="circle" coords="180,247,40" href="example.com"/>
    </map>
</body>
</html>

Special Note: Please go to MDN for compatibility information, as CSS3 has not stabilized.

How to rotate images in circular path like this in blogger dynamic view template

1 Answers1