Re: transform ªº®i¶}ÄÝ©Ê - transform-rotate, transform-translate.... ?

¨ä¹ê§Ú¦n¹³§â©RÃD§Ë¿ù¤F¡]§Ú§â¸Ñªk¤@·í¦¨©RÃD¡^¡A§Ú¥H¬°§Ú­Ì»Ý­n¤@­Ó¥i¥H¦b¤@­Ó¤¸¯À©³¤U³sÄò®M¥Î transform ªº¤è¦¡¡C

¤£¹L¡A§Ú·Qªº¤èªkÀ³¸ÓÁÙ¬O¨SÅÜ¡G

#demo {
 transform: translate(30px 60px) scale(0.5);
}
#demo.state-1 {
 transform-scale: 1.5; /* »\¹L #demo ªº scale(0.5) */
}
#demo.state-2 {
 transform-scale: 2;
}
#demo.state-1:transform(1) {
 transform-rotate: 30deg; /* ³o­Óªº¶¶§Ç·|±ß©ó¨S¦³¤U pseudo-class selector ªºÄÝ©Ê */
 transform-translate: 20px 0; /* ¤£·|»\±¼ #demo ªº translate¡G¥¦¬O¥t¤@¦¸ªº translate */
}

¦pªG¤µ¤Ñ¦³­Ó element: <div id="demo" class="state-1" />

¨º¥¦¾Ö¦³ªºÄݩʱN¦³¤U¦C¡]¨Ì·Ó scale > skew > rotate > translate ³o­Ó¶¶§Ç¡^¡G
transform-scale: 1.5;
transform-translate: 30px 60px;

ÁÙ¦³¤@­Ó pseudo-class :transform(1) selector ªºÄÝ©Ê¡]¥Î¨Ó©w¸q¤U¤@¶¥¬qªº transform¡^
transform-rotate: 30deg;
transform-translate: 20px 0;

¨º¥¦±N·|¨Ì§Ç®M¥Î¡G
transform-scale: 1.5;
transform-translate: 30px 60px;
transform-rotate: 30deg;
transform-translate: 20px 0;

-- 
Medical-Wei/ÃQÃÄ

----
Please avoid sending me Word or PowerPoint attachments.
See: http://www.gnu.org/philosophy/no-word-attachments.html
½Ð¾¨¥i¯à¤£­n±Hµ¹§Ú Microsoft Word ©Î¬O PowerPoint ªºªþ¥ó¡A§Ú·|¥´¤£¶}¡C
°Ñ·Ó¡Ghttp://blog.ofset.org/ckhung/index.php?post/081-nodocx

Received on Thursday, 7 April 2011 17:57:29 UTC