旋转 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 {&nbsp; &nbsp; display: block;&nbsp; &nbsp; transform: ${(props) => (props.isOpen ? "rotate(90deg)" : "rotate(270deg)")};&nbsp; &nbsp; transition: all ease-in 0.2s;}<span>{">"}</span>

Answer 2

实际上是span从中心旋转。但是您的插入符字形不在跨度的垂直中心，因为它在底部有很大的边距：^。在跨度上设置固定高度以强制插入符号向下。或者使用更合适的字形。const Wrap = styled.div`&nbsp; width: 100px;&nbsp; background: grey;&nbsp; span {&nbsp; &nbsp; display: block;&nbsp; &nbsp; transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(180deg)")};&nbsp; &nbsp; transition: all ease-in 0.2s;&nbsp; &nbsp; height: 13px;&nbsp; }`;