我已经创建了四个div(绝对定位),以便我能够围绕同一个中心旋转它们。问题是,我在每个div中都有一个链接,因此不再工作(不可能点击)。 我设法让他们在Firefox中使用“pointer-events:none;”在div和“指针事件:汽车;”在链接上。不幸的是,这仅适用于Firefox。 所以我想知道是否有人有另一个解决方案(可能没有JavaScript)来实现Safari和Chrome中的链接(可能还有IE)。
HTML:
<div id="one"><a href="#">Link one</a></div>
<div id="two"><a href="#">Link two</a></div>
<div id="three"><a href="#">Link three</a></div>
<div id="four"><a href="#">Link four</a></div>
CSS:
#one, #two, #three, #four {
height: 100px;
width: 100px;
position: absolute;
}
#one {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#two {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
#three {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
这是jsFiddle:http://jsfiddle.net/jf6A5/。
提前感谢您的帮助。