html - 你怎么能 "un-rotate"已经旋转的对象中的元素？

Question

我在尝试创建导航栏时遇到了一些问题。我一直想制作一个侧面导航栏部分，该部分具有菱形链接，这些链接可以并排向下(菱形链接非常类似于 http://thedrawingroomcreative.com/ 。但是，我旋转了整个链接本身以制作菱形但是我想知道我是否可以取消旋转容器内的对象。我仍在开始学习 html、css、javascript、jquery 等的一些基础知识，所以任何东西都有帮助。(这是我正在为学校设计的网站俱乐部)

HTML:

    <ul class="navbar1">
    <li>
       <!--Here we welcome visitors to our site and hopefully direct them to specific pages-->
       <a href="Home.aspx" title="Home Page">Home</a>
    </li>
    <li>
       <!--Here we talk about the school itself, it's technology courses (with pictures), about tsa, and our objectives as a club(link to contact info page)-->
       <a href="about.aspx">About Us</a>
    </li>
    <li>
        <!--List both participants in the club and advisors w/ a picture-->
        <a href="members.aspx">Members</a>
    </li>
    <li>
        <!--give a short paragraph of 'trying anything you want, have fun'. have a link to tsa list of competitions and the latest verision of the rules book-->
        <a href="comp.aspx">Competitions</a>
    </li>
    <li>
        <!--A quick update on how to join (with a link to contact info) and post some of the important forms nedded to join-->
        <a href="join.aspx">Join Us</a>
    </li>
  </ul>

  <!-- END OF LIST #1 -->

  <!-- --------------------------------------------------------------------------------------- -->

  <!-- LIST #2, STAGGERED TO THE RIGHT OF LIST #1 -->

  <ul class="navbar2">
    <li>
       <!--Quickly address the national TSA organization and va TSA, with links to both pages-->
       <a href="Chapter.aspx">Our Chapter</a>
    </li>
    <li>
        <!--Address our design brief and provide a link to our design brief website-->
        <a href="brief.aspx">Design Brief</a>
    </li>
    <li>
        <!--List important dates needed to know and current 'meeting' dates and work dates-->
        <a href="event.aspx">Events</a>
    </li>
    <li>
        <!--List important contact info for the school and advisors plus the school tsa email-->
        <a href="info.aspx">Contact Info</a>
    </li>
  </ul>

CSS:

       ul.navbar1 {
       font-family: 'Century Gothic', "Times New Roman", sans-serif;
       display: inline;
       text-align: center;
       list-style-type: none;
       padding: 0;
       margin: 0;
       width: 100%;
       position: absolute;
       top: 10%;
   }
   ul.navbar1 li {
       padding: 10px;
       border: 3px solid black;
       font-size: 145%;
       /*DIAMOND SHAPE*/
       width: 70px; 
       height: 70px; 
       margin: 3px 0 50px 30px;
       /* Rotation */
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
       transform: rotate(-45deg);
   }
   ul.navbar1 a {
       text-decoration: none;
       display: block;
       color: #01244E;
   }
   ul.navbar2 {
       font-family: 'Century Gothic', "Times New Roman", sans-serif;
       display: inline;
       text-align: center;
       list-style-type: none;
       padding: 0;
       margin: 0;
       width: 100%;
       position: absolute;
       top: 19.25%;
   }
   ul.navbar2 li {
       padding: 10px;
       border: 3px solid black;
       font-size: 145%;
       /*DIAMOND SHAPE*/
       width: 70px; 
       height: 70px; 
       margin: 3px 0 50px 104px;
       /* Rotation */
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
       transform: rotate(-45deg);
   }
   ul.navbar2 a {
       text-decoration: none;
       display: block;
       color: #01244E;
   }

Answer 1

尝试用相反的值旋转:

   ul.navbar2 a {
       text-decoration: none;
       display: block;
       color: #01244E;
       /* Rotation */
       -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
       transform: rotate(45deg);
   }