CSS旋转图标：无法正确旋转

Question

基本上我试图将-90度旋转成一个简单的图标。问题在于，由于某种原因，它始终保留了一个破坏轮换的边距。

以下是示例： https://jsfiddle.net/6e8qapvd/2/

.list li a .arrow {
  display: inline-block;
  float: right;
  margin-right: 30px;
  font-weight: 300;
  line-height: 40px;
  transition: all 0.12s ease;
}

.list li a .arrow.open {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

有什么想法吗？ ：/

Answer 1

默认情况下，transform-origin property的初始值为50% 50%。

您可以将其设置为100% 50%：

Updated Example

.list li a .arrow.open {
   transform: rotate(-90deg);
   transform-origin: 100% 50%;
}

Answer 2

使图标显示：inline-block;

.list li a .arrow {
  display: inline-block;
  float: right;
  margin-right: 30px;
  font-weight: 300;
  line-height: 40px;
  transition: all 0.12s ease;
}

.list li a .arrow.open {
 display: inline-block;
 transform: rotate(-90deg);
}