(5.1)--4.1CSStransformWeb前端攻城狮.pdf

《(5.1)--4.1CSStransformWeb前端攻城狮.pdf》由会员分享，可在线阅读，更多相关《(5.1)--4.1CSStransformWeb前端攻城狮.pdf（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章 CSS 级4.1CSS Transformtransform 变形对元素进平移、旋转、缩放、倾斜translaterotatescaleskewtransform 不会对其它元素布局产影响Emoji are ideograms and smileysused in electronic messages andweb pages.They are muchlike emoticons,but emoji are actualpictures instead of typographics.emoji transform:translate(100px,100px).emoji tran

2、sform:translateX(100px).emoji transform:translateY(-1em).emoji transform:translate(100%,100%)https:/s.codepen.io/webzhao/debug/xmGjmr/dGMXWdDaEmoji are ideograms and smileysused in electronic messages andweb pages.They are muchlike emoticons,but emoji are actualpictures instead of typographics.emoji

3、 transform:rotate(90deg).emoji transform:rotate(0.5turn).emoji transform?origin:0 0;transform:rotate(-50deg).emoji transform?origin:0 0;transform:rotate(360deg)https:/s.codepen.io/webzhao/debug/bOdKwG/NQAzYqEdZEmoji are ideograms and smileysused in electronic messages andweb pages.They are muchlike

4、emoticons,but emoji are actualpictures instead of typographics.emoji transform:scale(2).emoji transform:scale(3,0.5).emoji transform?origin:0 0;transform:scale(4).emoji transform?origin:0 0;transform:scaleY(2)https:/s.codepen.io/webzhao/debug/zyGaaW/DqkDdKwbNEmoji are ideograms and smileysused in el

5、ectronic messages andweb pages.They are muchlike emoticons,but emoji are actualpictures instead of typographics.emoji transform:skewX(30deg).emoji transform:skewY(50deg).emoji transform:skew(30deg,20deg)https:/s.codepen.io/webzhao/debug/XobYvB/vWARwaLZVEmoji are ideograms and smileysused in electron

6、ic messages andweb pages.They are muchlike emoticons,but emoji are actualpictures instead of typographics.emoji transform:translateX(100px)rotate(90deg).emoji transform:rotate(90deg)translateX(100px).emoji transform:scale(2)translateX(100px)rotate(90deg)https:/codepen.io/webzhao/debug/XobBXx3D 变形Emo

7、ji are ideograms and smileysused in electronic messages andweb pages.They are muchlike emoticons,but emoji are actualpictures instead of typographics.emoji transform:rotateY(40deg).emoji transform:perspective(100px)rotateY(40deg).emoji transform:perspective(40px)rotateY(40deg).emoji transform:perspective(100px)translate3d(100px,100px,20px)rotateY(80deg)