rotating div pie with transition - html

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>

Answer 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/