html转div,html – 旋转转换div饼

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

}

link 1

link 2

link 3

link 4