首先,我想解释一下我想要实现的目标.我还不能发布picutes所以我希望言语会有所帮助.我有一个有四个部分的馅饼.
我想用不同的链接链接每个部分,当悬停在一个部分上时,饼应该旋转.它的旋转程度取决于部分.
在我的第一次尝试中,我尝试使用imagemapping.直到我发现它们无法旋转.
经过长时间的思考,我想出了这个想法:分离我的四个部分,并将它们组合成一个有四个div的馅饼.
这很有效,我有点自豪,哈哈.因为我想要整个馅饼旋转我试过这个:
当您将鼠标悬停在其中一个部分上时,会出现一个新图像(整个)饼图并旋转.我想要一个平滑的旋转,所以我添加了一个过渡,但这是我的问题开始的地方:是的过渡有效,但它会影响出现的图像的进入,因为这些部分和整个饼图像有不同的大小,并且我无法更改部分方面,否则其他部分无法访问.
我希望这不是太混乱,也许我的想法或至少我试图实现它的方式是愚蠢或不可能的,但我想尝试一下.
#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;
}