translate:移å¨ï¼transformçä¸ä¸ªæ¹æ³
éè¿ translate() æ¹æ³ï¼å
ç´ ä»å
¶å½åä½ç½®ç§»å¨ï¼æ ¹æ®ç»å®ç leftï¼x åæ ï¼ å
topï¼y åæ ï¼ ä½ç½®åæ°ï¼
ç¨æ³transform: translate(50px,
100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
transform:åå½¢ãæ¹å
CSS3ä¸ä¸»è¦å
æ¬
æ转ï¼rotate() 顺æ¶éæ转ç»å®çè§åº¦ï¼å
许è´å¼ rotate(30deg)
ææ²ï¼skew() å
ç´ ç¿»è½¬ç»å®çè§åº¦,æ ¹æ®ç»å®ç水平线ï¼X è½´ï¼ååç´çº¿ï¼Y
è½´ï¼åæ°ï¼skew(30deg,20deg)
缩æ¾ï¼scale() æ¾å¤§æ缩å°ï¼æ ¹æ®ç»å®ç宽度ï¼X è½´ï¼åé«åº¦ï¼Y è½´ï¼åæ°ï¼
scale(2,4)
移å¨ï¼translate() 平移ï¼ä¼ è¿ x,yå¼ï¼ä»£è¡¨æ²¿xè½´åy轴平移çè·ç¦»
ææç2D转æ¢æ¹æ³ç»åå¨ä¸èµ·ï¼ matrix()
æ转ã缩æ¾ã移å¨ä»¥åå¾æå
ç´
matrix(scale.x ,, , scale.y , translate.x,
translate.y)
æ¹åèµ·ç¹ä½ç½® transform-origin:
bottom left;
综åèµ·æ¥ä½¿ç¨ï¼transform: 30deg
1.5 30deg 20deg 100px 200px;
transition: å
许CSSå±æ§å¼å¨ä¸å®çæ¶é´åºé´å
å¹³æ»çè¿æ¸¡ï¼
éè¦äºä»¶ç触åï¼ä¾å¦åå»ãè·åç¦ç¹ã失å»ç¦ç¹ç
transition:property duration timing-function delay;
property:CSSçå±æ§ï¼ä¾å¦ï¼width height
为noneæ¶åæ¢ææçè¿å¨ï¼å¯ä»¥ä¸ºtransform
duration:æç»æ¶é´
timing-function:easeç
delay:延è¿
注æï¼å½property为allçæ¶åææå¨ç»
ä¾å¦ï¼transition:width 2s ease 0s;
温馨提示:答案为网友推荐,仅供参考