html - オーバーレイ div 内でクリックできないリンク

Question

同じ中心を中心に回転できるように、互いに 4 つの div を作成しました (絶対配置)。問題は、各 div 内にリンクがあり、その結果、もう機能していない (クリックできない) ことです。「pointer-events: none;」を使用して、Firefoxでそれらを機能させることができました。div と "pointer-events: auto;" について リンクで。残念ながら、これは Firefox でのみ機能します。だから、誰かがSafariとChrome（そしておそらくIE）でもリンクを可能にする別の解決策（おそらくJavaScriptなし）を持っているかどうか知りたい.

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/。

よろしくお願いいたします。