title: how to position circle-elements around half-circle
body: <p>I'd like to place my menu-circles around the menu-button (half-circle). I thought it's possible to do that with <code>transform: rotate(x deg)</code> for the elements, but it did not work. I don't know what I'm doing wrong... </p>
  
  <p>it should also be possible to do that with jquery, i think... would that be better? </p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="overlay"&gt;&lt;/div&gt;
    &lt;footer&gt;
      &lt;div id="menuopen"&gt; &lt;span class="buttonmenu"&gt; - &lt;/span&gt;
        &lt;div&gt; 
          &lt;a class="infoactive" href="#"&gt;&lt;span class="entypo-info"&gt;&lt;/span&gt;&lt;/a&gt; 
          &lt;a class="sights" href="sehensw%C3%BCrdigkeiten.html"&gt;&lt;span class="fontawesome-eye-open"&gt;&lt;/span&gt;&lt;/a&gt; 
          &lt;a class="food" href="essen.html"&gt;&lt;span class="fontawesome-food"&gt;&lt;/span&gt;&lt;/a&gt; 
          &lt;a class="sports" href="sportfreizeit.html"&gt;&lt;span class="maki-soccer"&gt;&lt;/span&gt;&lt;/a&gt; 
          &lt;a class="calendar" href="veranstaltungen.html"&gt;&lt;span class="fontawesome-calendar"&gt;&lt;/a&gt; 
          &lt;a class="map" href="karte.html"&gt;&lt;span class="typicons-globe"&gt;&lt;/a&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="menuclosed"&gt; &lt;span class="buttonmenu"&gt; + &lt;/span&gt; &lt;/div&gt;
    &lt;/footer&gt;
    &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js" type="text/javascript"&gt;      &lt;/script&gt; 
  &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt; 
  $(document).ready(function () {
      $(".buttonmenu").click(function () {
          $("#overlay, #menuclosed, #menuopen").fadeToggle();
      });
  });
  </code></pre>
  
  <p>sorry, I have problems to enter my css here... but it's in the jsfiddle: <a href="http://jsfiddle.net/AMjPh/" rel="nofollow">http://jsfiddle.net/AMjPh/</a> </p>