旋转 html 插入符号不会使用 css 从中心旋转

Question

我有这个简单的插入符号可以旋转，但它似乎没有从中心旋转，我应该调整什么？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>  );}https://codesandbox.io/s/angry-jackson-8rdcl?file=/src/App.js:90-541

Answer 1

这是因为你的元素的尺寸。看对比截图：

相对

只需使用其他资产。

例子：

span {

    display: block;

    transform: ${(props) => (props.isOpen ? "rotate(90deg)" : "rotate(270deg)")};

    transition: all ease-in 0.2s;

}

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

Answer 2

实际上是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;

  }

`;