CSS 旋转图标：旋转不正确

Question

基本上我正在尝试将一个简单的图标旋转-90 度。问题是由于某种原因，它总是保持一个破坏旋转的边距。

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

CSS 旋转图标：旋转不正确

CSS Rotate Icon: Not rotating correctly

css

rotation