scale
åºçº¿
广æ³å¯ç¨
èª 2022å¹´8æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS 屿§ scale å
è®¸ä½ å¯ä»¥åå«ä¸ç¬ç«å°æå® CSS 屿§ transform 缩æ¾çæ¯ä¾ãè¿æ´å¥½å°æ å°å°å
¸åç UIï¼ç¨æ·çé¢ï¼ç¨æ³ä¸ï¼å¹¶å
å»äºå¨æå®åæ¢å¼æ¶å¿
须记ä½åæ¢å½æ°ç精确顺åºç麻ç¦ã
è¯æ³
/* å
³é®å¼ */
scale: none;
/* åä¸ªå¼ */
/* è®¾å®æ¯ 1 å¤§çæ°å¼ä½¿è¯¥å
ç´ å大 */
scale: 2;
/* è®¾å®æ¯ 1 å°çæ°å¼ä½¿è¯¥å
ç´ ç¼©å° */
scale: 0.5;
/* ä¸¤ä¸ªå¼ */
scale: 2 0.5;
/* ä¸ä¸ªå¼ */
scale: 2 0.5 2;
åå¼
- å䏿°å¼
-
åä¸çæ°å¼å³æå®äºä¸ä¸ªç¼©æ¾ç³»æ°ï¼åæ¶ä½ç¨äº X è½´å Y 轴让该å ç´ è¿è¡ç¼©æ¾ï¼ç¸å½äºæå®äºå个å¼ç scale()(2D 缩æ¾) 彿°ã
- 两个é¿åº¦/ç¾åæ¯å¼
-
两个æ°å¼å³å嫿å®äº 2D æ¯ä¾ç X è½´å Y è½´ç缩æ¾ç³»æ°ï¼ç¸å½äºæå®äºä¸¤ä¸ªå¼ç scale()ï¼2D 缩æ¾ï¼å½æ°ã
- ä¸ä¸ªé¿åº¦/ç¾åæ¯å¼
-
ä¸ä¸ªæ°å¼å³å嫿å®äº 3D æ¯ä¾ç X è½´ãY è½´å Z è½´ç缩æ¾ç³»æ°ãç¸å½äºä¸ä¸ª scale3d() 彿°ã
none-
æå®ä¸è¿è¡ç¼©æ¾ã
å½¢å¼è¯æ³
scale =
none |
[ <number> | <percentage> ]{1,3}
示ä¾
>HTML
<div>
<p class="scale">Scaling</p>
</div>
CSS
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
.scale {
transition: scale 1s;
}
div:hover .scale {
scale: 2 0.7;
}
ç»æ
è§è
| è§è |
|---|
| CSS Transforms Module Level 2 > # individual-transforms > |
| åå§å¼ | none |
|---|---|
| éç¨å ç´ | å¯åæ¢å ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | a transform |
| Creates stacking context | æ¯ |