0

I have created four div upon each other (absolute positioning) so that I was able to rotate them around the same centre. The problem is, I have a link within each div, that are consequently not working anymore (impossible to click). I managed to make them work in Firefox with "pointer-events: none;" on the div and "pointer-events: auto;" on the link. Unfortunately this only works in Firefox. So I would like to know if someone had another solution (possibly without JavaScript) to able the links in Safari and Chrome too (and possibly 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);
}

Here is the jsFiddle: http://jsfiddle.net/jf6A5/.

Thank you in advance for your help.

helenej
  • 331
  • 4
  • 15
  • 1
    It's the positioning of the absolute `
    ` elements. The fourth one is the last element so it will be positioned on top of the others...
     – War10ck Jun 16 '14 at 20:23
  • 1
    what you said about the solution working only on FireFox in fact also works on Opera and Chrome (at least the latest versions). – King King Jun 16 '14 at 20:23
  • I’d say _avoid_ placing those elements on top of each other, but try and use `transform-origin` instead for the purpose of rotating them around the same “center” . – CBroe Jun 16 '14 at 20:26
  • @War10ck I know it is because of this, unfortunately I did not found any other solution to do what I wanted to do, i.e. rotate the div around the same center. – helenej Jun 17 '14 at 16:14
  • @CBroe Thank you for your suggestion, however I did not really understood how transform-origin worked, I mean, on which element should I apply it? – helenej Jun 17 '14 at 16:17
  • Edit to my last comment, I have not choice but placing the elements on top of each other :( – helenej Jun 17 '14 at 20:28

0 Answers0