Javascript 旋转html插入符号不'；不要使用css从中心旋转

我有这个简单的插入符号旋转，但它似乎没有从中心旋转，我应该调整什么

const Wrap = styled.div`
  width: 100px;
  background: grey;

  span {
    display: block;
    transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(180deg)")};
    transition: all ease-in 0.2s;
  }
`;

export default function App() {
  const [open, setIsOpen] = React.useState(false);
  return (
    <Wrap isOpen={open} className="App" onClick={() => setIsOpen(!open)}>
      {open.toString()}
      <span>&#94;</span>
    </Wrap>
  );
}

const Wrap=styled.div`
宽度：100px；
背景：灰色；
跨度{
显示：块；
变换：${（props）=>（props.isOpen？“旋转（0度）”：“旋转（180度）”）；
过渡：0.2s内全部缓解；
}
`;
导出默认函数App（）{
const[open，setIsOpen]=React.useState（false）；
返回(
setIsOpen（！open）}>
{open.toString（）}
^
);
}

---

这是因为元素的尺寸。请参见比较屏幕截图：

对

只需使用另一项资产

例如：

span {
    display: block;
    transform: ${(props) => (props.isOpen ? "rotate(90deg)" : "rotate(270deg)")};
    transition: all ease-in 0.2s;
}

<span>{">"}</span>

span{
显示：块；
变换：${（props）=>（props.isOpen？“旋转（90度）”：“旋转（270度）”）；
过渡：0.2s内全部缓解；
}
{">"}

---

span实际上是从中心旋转的。但是插入符号图示符不在跨度的垂直中心，因为它在底部有一个很大的边距：

^

。在跨距上设置固定高度以强制插入符号向下。或者使用更合适的标志符号

const Wrap = styled.div`
  width: 100px;
  background: grey;

  span {
    display: block;
    transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(180deg)")};
    transition: all ease-in 0.2s;
    height: 13px;
  }
`;

---

正如我所看到的，只要点击旋转按钮，它就可以正常工作。问题是什么？@aviboy2006它看起来很奇怪，它没有从中心旋转。尝试与此进行比较：但此插入符号看起来与html插入符号不同。对于这种情况，最好使用图像还是合适的svg图标？这取决于您希望它看起来像什么。您可以像前面提到的那样使用svg，可以在跨度上设置一个固定的高度吗？