转换div

Question

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

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

在我的第一次尝试中，我尝试使用imagemapping。直到我发现它们无法旋转。

经过长时间的思考，我想出了这个想法：分开我的四个部分，然后将它们组合成一个有四个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/