HBuilderX設置transform修改界面元素步驟介紹

HBuilderX是一款web開發工具,支持html5,小伙伴們可以用它設計自己的網站 。其中transform命令可以改變元素的設置,想知道具體怎么使用就接著往下看吧 。
HBuilderX使用transform對元素實現多種變形方法
第一步,打開HBuilderX工具,新建頁面文件,選擇HTML5模板

HBuilderX設置transform修改界面元素步驟介紹

第二步,在標簽中,插入一個div標簽
HBuilderX設置transform修改界面元素步驟介紹

【HBuilderX設置transform修改界面元素步驟介紹】第三步,使用div標簽ID選擇器,設置寬度、高度、字體屬性
HBuilderX設置transform修改界面元素步驟介紹

第四步 , 保存頁面代碼,打開瀏覽器 , 查看界面效果
HBuilderX設置transform修改界面元素步驟介紹

第五步,添加transform屬性,設置值為translate(200px, 200px) rotate(45deg) scale(1.2)
HBuilderX設置transform修改界面元素步驟介紹

第六步,再次保存并刷新瀏覽器,查看界面效果
HBuilderX設置transform修改界面元素步驟介紹

想看看還有什么軟件適合自己嗎?那就來經驗啦網軟件教程頻道看看吧,這里有詳細的教程和攻略,總有一篇符合你的心意 。

相關經驗推薦