带过渡的旋转 div 饼图

Question

首先我想解释一下我想要实现的目标。我还不能发布图片，所以我希望文字会有所帮助。我有一个有四个部分的馅饼。

我想用不同的链接链接每个部分，当悬停在一个部分上时，饼图应该旋转。它的旋转程度取决于部分。

在我的第一次尝试中，我尝试了图像映射。直到我发现它们不能旋转。

经过长时间的思考，我想出了这个想法：将我的四个部分分开，然后将它们组合成一个有四个 div 的饼图。 这奏效了，我有点自豪，哈哈。因为我想让整个馅饼旋转，所以我尝试了这个：

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

当您将鼠标悬停在其中一个部分上时，会出现一个新的图像（整个）饼图，并且它会旋转。我想要一个平滑的旋转，所以我添加了一个过渡，但这就是我的问题开始的地方：是的，过渡有效，但它会影响出现的图像的进入，因为部分和整个饼图的大小不同，并且我无法更改部分，否则其他部分无法访问。

我希望这不会太令人困惑，也许我的想法或至少我尝试实现它的方式是愚蠢或不可能的，但我想尝试一下。

#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

您需要将转换更改为仅在转换上起作用，而不是像这样：

transition: transform 0.5s linear;

不是

transition: all 0.5s linear;

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