CSS3 rotate in IE8

Question

I tried all possible options found here on stackoverflow to help IE8 to transform: rotate. The only one which worked almost correctly is cssSandpaper. It rotates my navigation as needed, but when I test it in IETester it seems that the real links are positioned in inverse angle to horizon, comparing to the navigation.

Here is a print-screen

I spent so much time now, searching for the reason this is heppenning. Hope there are pros who can tell me whats the problem with it.

JsFiddle

code for nav is simple bootstrap:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">123</a></li>
          <li><a href="#">123</a></li>
          <li><a href="#">123</a></li>
          <li><a href="#">123</a></li>
          <li><a href="#">123</a></li>
          <li><a class="lastNavLink" href="#">123</a></li>   
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>
</header>

rotation in css

nav    {
      margin-top: 40px;
      margin-bottom: 20px;
      -moz-transform: rotate(-4deg);  /* FF3.5+ */
      -o-transform: rotate(-4deg);  /* Opera 10.5 */
      -webkit-transform: rotate(-4deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-4deg);  /* IE9 */
      transform: rotate(-4deg);  
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9975640502598243, M12=0.06975647374412515, M21=-0.06975647374412515, M22=0.9975640502598243, SizingMethod='auto expand')";
      zoom: 1;
    }

Javascripts all default in bootstrap + cssSandpaper. Take a look at jsFiddle before code.