亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

旋轉 html 插入符號不會使用 css 從中心旋轉

旋轉 html 插入符號不會使用 css 從中心旋轉

www說 2023-03-24 17:06:32
我有這個簡單的插入符號可以旋轉,但它似乎沒有從中心旋轉,我應該調整什么?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
查看完整描述

2 回答

?
慕森王

TA貢獻1777條經驗 獲得超3個贊

這是因為你的元素的尺寸??磳Ρ冉貓D:

http://img1.sycdn.imooc.com//641d68380001e89c01650240.jpg

相對

http://img1.sycdn.imooc.com//641d6842000188b703030172.jpg

只需使用其他資產。


例子:


span {

    display: block;

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

    transition: all ease-in 0.2s;

}


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


查看完整回答
反對 回復 2023-03-24
?
叮當貓咪

TA貢獻1776條經驗 獲得超12個贊

實際上是span從中心旋轉。但是您的插入符字形不在跨度的垂直中心,因為它在底部有很大的邊距:^。在跨度上設置固定高度以強制插入符號向下?;蛘呤褂酶线m的字形。


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;

  }

`;


查看完整回答
反對 回復 2023-03-24
  • 2 回答
  • 0 關注
  • 192 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號