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);
   }

如何在已旋转的对象中“取消旋转”元素？

1 个答案: