css - 将元素旋转到位

Question

我正在创建一个动画侧边栏，我正在尝试将一个元素（跨度，红色箭头）旋转到位，但没有成功。除了向左移动一定量之外，元素也会向上移动。

如何将箭头旋转到位，使其保持在同一位置并且不会向左和向上？

    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
    @font-face { font-family: "ionicons"; src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
    
    .sidebar {
      width: 230px;
      height: 100%;
      position: fixed;
      padding: 1rem 1.5rem;
      background-color: #F9FAFC;
      font-family: 'Source Sans Pro';
      font-size: 14px;
      box-sizing: border-box;
    }
    
    ul {
      list-style: none;
    }
    
    ul, li {
      padding: 0;
      margin: 0;
    }
    
    li {
      padding: 0.5rem 0;
    }
    
    .submenu {
      max-height: 0;
      overflow-y: hidden;
      margin: 0 -1.5rem;
      background-color: #F4F4F5;
    }
    
    .submenu li:first-child {
      padding: 0.1rem 0 0 1.5rem;
    }
    
    .submenu li:last-child {
      padding: 0 0 0.1rem 1.5rem;
    }
    
    .submenu li {
      padding: 0.5rem 1.5rem;
    }
    
    .menu li:hover > .submenu {
      max-height: 200px;
      padding: 0.5rem 0;
      transition: max-height 0.7s linear;
    }
    
    .menu > li:hover {
      background-color: #F4F4F5;
      margin: 0 -1.5rem;
      padding: 0.5rem 1.5rem;
    }
    
    .menu > li {
      position: relative;
      color: #444444;
      font-weight: bold;
    }
    
    .menu > li > a {
      display: block;
      color: #444444;
      text-decoration: none;
      font-weight: bold;
    }
    
    .menu > li > a:hover {
      color: black;
    }
    
    .submenu > li > a {
      display: block;
      color: #626262;
      text-decoration: none;
    }
    
    .submenu > li > a:hover {
      color: black;
    }
    
    .submenu > li {
      font-weight: normal !important;
    }
    
    .arrow { 
      display: inline-block;
      width: 10px;
      transition: all 0.5s ease-in-out;
      transform-origin: center center;
    }
    
    .arrow:after {
      content: '\f125';
      font-family: 'ionicons';
      color: red;
      right: 0.75em;
      position: absolute;
      width: 10px;
      font-size: 0.5em;
      top: 45%;
    }
    
    .menu > li:hover .arrow {
      transform: rotate(90deg);
    }

<div class="sidebar">
      <nav>
        <ul class="menu">
          <li>
            <a href="/dashboard/">Dashboard</a>
          </li>
          <li>
            Transactions<span class="arrow"></span>
            <ul class="submenu">
              <li><a href="/transactions/create/">New Transaction</a></li>
              <li>View Transactions</li>
              <li>Dummy Transactions</li>
            </ul>
          </li>
          <li>
            Budgets
          </li>
        </ul>
      </nav>
    </div>

演示

标签： css