¡¡¡¡CSS3 3D ÐÐÐÇÔËת demo Ò³ÃæÇë´Á£ºDemo¡£(½¨ÒéʹÓÃChrome´ò¿ª)¡¡¡¡±¾ÎÄÍêÕûµÄ´úÂ룬ÒÔ¼°¸ü¶àµÄ CSS3 Ч¹û£¬ÔÚÎÒ Github ÉÏ¿ÉÒÔ¿´µ½£¬Ò²Ï£Íû´ó¼Ò¿ÉÒÔµã¸ö star¡£¡¡¡¡àÅ£¬¿ÉÄÜÓÐЩÈË´ò²»¿ª demo »ò
ÓÃ∵
¡¡¡¡ÓкܶàCSSÐÂÊôÐÔ²¢Î´°üº¬½øCSS3¹Ù·½±ê×¼ÖУ¬Ïñ¹È¸èä¯ÀÀÆ÷»ò»ðºüä¯ÀÀÆ÷µÈ¶¼»áÀûÓÃCSSµÄä¯ÀÀÆ÷ÒýÇæǰ׺(Vendor Prefix)À´ÊµÏֺܶà×Ô¶¨ÒåµÄCSS¹¦ÄÜ¡£-webkit-box-reflectÊôÐÔ¾ÍÊÇÒԹȸèä¯ÀÀÆ÷Ϊ´ú±íµÄWebkitäÖ
¡¡¡¡15ÖÖʹÓÃcss3ÖÆ×÷µÄÊó±êhoverͼƬ¶¯»Ð§¹û¡£Ö÷ÒªµÄcss¼¼Êõ°üÀ¨3D translate¡¢transform¡¢transitionºÍαԪËØ¡£µ±Êó±êÐüÍ£µ½Í¼Æ¬ÉÏ£¬Í¼Æ¬µÄ±êÌâÒÔ¸÷ÖÖÐÂÓ±µÄ¶¯»·½Ê½³öÏÖ¡£
¡¡¡¡ÀûÓÃcss3 transitionÊôÐÔÖÆ×÷µÄ21ÖÖ²»Í¬µÄÊó±êÐüͣЧ¹û¡£µ±Êó±êhover»òÐüÍ£ÔÚ³¬Á´½ÓÉÏʱ£¬»á´¥·¢¸÷ÖÖ¶¯»Ð§¹û¡£Ã¿ÖÖ¶¯»Ð§¹û¶¼Ê®·Ö¶ÀÌØ£¬¿ÉÓÃÓÚÍøÕ¾µ¼º½¡£¡¡
¡¡¡¡Ð¼¼ÊõµÄ³öÏÖÍùÍùÒâζ×ÅеÄÉú²úÁ¦µÄÌá¸ß¡£Ëæ×ÅHTML5ºÍ<font∵color="#f00">CSS3</font>µÄÁ÷ÐкÍÆÕ¼°£¬Ô½À´Ô½¶àµÄз½·¨ÄÜÈÃÎÒÃǼò½àÓÖÇáËɵĽâ¾öÒÔÇ°Óúܸ´ÔӵĴúÂë²ÅÄÜÍê³ÉµÄÊÂÇé¡£±ÈÈçHTML5ÖеÄdownloadºÍplaceholder£¬<font∵color="#f00">CSS3...
¡¡¡¡CSS3ÖкͶ¯»ÓйصÄÊôÐÔÓÐÈý¸ö transform¡¢transition ºÍ animation¡£ÏÂÃæÀ´Ò»Ò»ËµÃ÷:¡¡¡¡transform¡¡¡¡´Ó×ÖÃæÀ´¿´transformµÄÊÍÒåΪ¸Ä±ä£¬Ê¹…±äÐÎ;ת»» ¡£ÕâÀïÎÒÃǾͿÉÒÔÀí½âΪ±äÐΡ£ÄǶ¼ÄÜÔõô±äÄØ?¡¡
ÔÚÖع¹Òƶ¯¶ËÒ³ÃæµÄʱºò£¬ÎÒÃǾ³£»áÓöµ½Á½¸ö¿ò¼Ü²¢ÅŵÄÇé¿ö£¬²¢ÇÒÐèÒª¿í¶È×ÔÊÊÓ¦¡¢µÈ¿í£¬Óб߿òÕâÑùµÄÇé¿ö£¬ÎÒƽʱµÄ·½·¨¾ÍÊÇÓö¨Î»À´´¦Àí£¬È»ºóÓøºÖµ¶¨Î»À´½â¾ö£¬µ«ÊǺóÀ´·¢ÏÖ¿ÉÒÔÓÃCSS3ÖеÄBox-SizingÊôÐÔÀ´
³£Óö¯»ÊôÐÔ£ºtransform:translate(x,y); ƽÒÆ,x´ú±íÏòÓÖÒƶ¯¾àÀ룬y´ú±íÏòÏÂÒƶ¯¾àÀ룻transform:scale(x,y); Ëõ·Å£¬x´ú±íˮƽËõ·Å±¶Êý£¬y´ú±í´¹Ö±Ëõ·Å±¶Êý£»transform:rotate(x); Ðýת£¬x´ú±í˳ʱÕëÐýת¶à
ÏÖÔÚ¾³£»á¿´µ½Ò»Ð©ÃÅ»§ÍøÕ¾µÄרÌâʹÓõ½CSS3µÄ¶¯»£¬Õ¦Ò²²»ÄÜÂäÎ飬ÔÚ´ËÕâÊáÀí϶¯»ÖªÊ¶°É£¬±ãÓÚºóÃæÓõ½¡£½ÓÏÂÀ´½éÉÜÏÂAnimation¶¯»µÄ¶¨ÒåºÍµ÷Óã¬ÔÚ½éÉÜAnimation֮ǰÐèÒªÁ˽âÏÂKeyframes£¬Ó¢ÎÄÒâ˼¾ÍÊǹؼü
IE10 ÒÔÏ°汾µÄä¯ÀÀÆ÷½øÐв¿·Ö CSS3 ¼æÈÝÖ÷½Ç£ºPIE js , PIE htc Á½ÖÖ·½·¨¿ÉÒÔʵÏÖ¹Ù·½ÍøÕ¾£ºhttp: css3pie com ÑÝʾµØÖ·£ºhttp: css3pie com demos gradient-patterns ÖØÒª¹¦ÄÜʵÏÖ£º¿ÉÒÔʹ IE6¡¢7¡¢
»ùÓÚjQuery+HTML5+CSS3ʵÏÖµÄÆÕ³µ¶¯»£¬Ð¡³µ¿ÉÒÔˮƽ¹ö¶¯£¬Ð§¹û·Ç³£±ÆÕæ¡£ÕûÀí´úÂëÒÔCSSΪÖ÷£¬¼ÓÔØÁ÷³©£¬ÖµµÃѧϰ²Î¿¼
´¿CSS3ʵÏÖ»ð³µÍ·Òƶ¯£¬Ð§¹û¾«Ö£¬¼æÈÝÖ÷Á÷ä¯ÀÀÆ÷¡£
Ëæ×Å»¥ÁªÍø·¢Õ¹µÄÈç»ðÈçݱ£¬¼â¶Ë¼¼ÊõÑÓÉìµ½¸÷¸öÁìÓò£¬»¥ÁªÍøÈ˲ű¸ÊÜÆóÒµÇàíù¡£ÃæÏòÔÚУ´óѧÉú¡¢Ö°³¡ÈËÊ¿µÄITÔÚÏß½ÌÓý·çÉúË®Æð£¬Ä½¿ÎÍø×÷ΪÖйú×î´óµÄITʵսѧϰƽ̨£¬Ò»Ö±ÒÔ¾«Æ·¿Î³Ì¡¢×¿Ô½µÄÓû§ÌåÑéÁ캽ÐÐÒµ·¢
CSS²Î¿¼ÊÖ²áv3 4 0ÐÂÔöÁËdisplayµÄboxºÍinline-boxÖµ£»ÐÂÔöÁËCSS Flexible Box Layout Properties²Î¿¼£»¸üÐÂÁËtext-decoration²Î¿¼£»ÐÂÔöÁËtext-decoration-line¡¢text-decoration-color¡¢text-decoration-s