html – 旋转转换div饼

2023年6月6日 151次阅读

首先,我想解释一下我想要实现的目标.我还不能发布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>

最佳答案 您需要将转换更改为仅适用于转换,而不是像这样：

transition: transform 0.5s linear;

不

transition: all 0.5s linear;

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

点赞