rotating div pie with transition

Question

First I would like to explain what I want to achieve. I can't post picutes yet so I hope words will help. I have a pie with four sections.

And I want to link every of the sections with different links, and when hovering over a section, the pie should rotate. The degree of it's rotation depends on the section.

In my first attempt I tried it with imagemapping. Until I found out that they can't rotate.

After a long time of thinking I came up with this idea: Seperating my four parts, and bringing them together to a pie with four divs. This worked and I was kinda proud, haha. Since I want the whole pie to rotate I tried this:

https://jsfiddle.net/canaika/dL569v6d/

When you hover over one of the sections a new image (the whole) pie appears, and it rotates. I wanted a smooth rotation, so I added a transition, but this ist where my problem started: yes the transition works, but it affects the come in of the image that appears, because the sections and the whole pie image have different sizes, and I can't change the sections side, otherwise the other sections are not accessible.

I hope this wasn't too confusing, maybe my idea or at least the way I tried to achieve it is dumb or impossible, but I wanted to give it a try.

#rotation1 {
  background-image: url('http://www.imgbox.de/users/canaika/blue_navi.png');
  height: 112px;
  width: 112px;
  position: fixed;
  top: 100px;
  left: 300px;
}
#rotation1:hover {
  background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
  height: 224px;
  width: 224px;
  z-index: 1;
  -webkit-transform: rotate(45deg), ;
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -khtml-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#rotation2 {
  background-image: url('http://www.imgbox.de/users/canaika/pink_navi.png');
  height: 112px;
  width: 112px;
  position: fixed;
  top: 100px;
  left: 412px;
}
#rotation2:hover {
  background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
  height: 224px;
  width: 224px;
  position: fixed;
  top: 100px;
  left: 300px;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
  z-index: 1;
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -khtml-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#rotation3 {
  background-image: url('http://www.imgbox.de/users/canaika/yellow_navi.png');
  height: 112px;
  width: 112px;
  position: fixed;
  top: 212px;
  left: 300px;
}
#rotation3:hover {
  background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
  height: 224px;
  width: 224px;
  position: fixed;
  top: 100px;
  left: 300px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  z-index: 1;
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -khtml-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#rotation4 {
  background-image: url('http://www.imgbox.de/users/canaika/green_navi.png');
  height: 112px;
  width: 112px;
  position: fixed;
  top: 212px;
  left: 412px;
}
#rotation4:hover {
  background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
  height: 224px;
  width: 224px;
  position: fixed;
  top: 100px;
  left: 300px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
  z-index: 1;
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -khtml-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#zeiger {
  background-image: url('http://www.imgbox.de/users/canaika/zeiger.png');
  height: 35px;
  width: 9px;
  position: fixed;
  top: 100px;
  left: 407px;
  z-index: 2;
}

<div id="rotation1">link 1</div>
<div id="rotation2">link 2</div>
<div id="rotation3">link 3</div>
<div id="rotation4">link 4</div>
<div id="zeiger"></div>

Thank you! :)I had to edit my post, because the link was missing! — ena, May 21 '16 at 15:16
It rotating because you use `background-image`, try to make circle-quarters with html/css or svg — flppv, May 21 '16 at 15:19
Not 100% what you need but this should help you - http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side/34902989#34902989 — Harry, May 21 '16 at 15:24
@ena Try adding the transition rules to the selectors without ":hover" too. For eg. you have the `transition` rules applied to `#rotation4:hover`, do it also for `#rotation4` (and others as well.) Not sure, but looks like you need other smoothness in the transition as well for which you may check the answers. — Deepak Kamat, May 21 '16 at 15:25

score 1 · Accepted Answer · answered May 21 '16 at 15:25

1

You need to change your transition to work only on transform not all like this :

transition: transform 0.5s linear;

not

transition: all 0.5s linear;

https://jsfiddle.net/IA7medd/dL569v6d/2/

answered May 21 '16 at 15:25

Ahmed Salama

2,795
1
11
15

Omg! Thank you so much! – ena May 21 '16 at 15:30

rotating div pie with transition

1 Answers1