֮ǰѧϰ
react+webpack £¬Å¼È»Â·¹ý webpack ¹ÙÍø £¬¿´µ½¶¥²¿µÄ LOGO £¬¾ÍºÜ¸ÐÐËȤ¡£
×î½ü¾õµÃ×Ô¼º CSS3 ¹ýÓÚ±¡Èõ£¬Ïë×ÅÉîÈëѧϰһ·¬£¬ËìÒÔÕâ¸ö LOGO ΪÇÐÈë¿Ú£¬ºÃºÃÑо¿Ñ§Ï°ÁËÒ»ÏÂÏà¹ØµÄ
CSS3 ÊôÐÔ¡£webpack µÄ LOGO ¶¯»Ð§¹ûÕ§¿´²»ÊǺÜÄÑ£¬ÉîÈëÁ˽âÖ®ºó£¬¾õµÃÄÚ²¿Æäʵ´óÓÐѧÎÊ£¬×Ô¼ºÕÛÌÚÁËÒ»·¬£¬×öÁËһϵÁÐÏà¹ØµÄ
CSS3 ¶¯»Ð§¹û¡£
ÏÈÉÏ demo £¬Ã»Óн«¾«Á¦·ÅÔÚ¼æÈÝÉÏ£¬ÇëÓà chrome ´ò¿ª¡£
±¾ÎÄÍêÕûµÄ´úÂ룬ÒÔ¼°¸ü¶àµÄ CSS3 Ч¹û£¬ÔÚÎÒ github ÉÏ¿ÉÒÔ¿´µ½£¬Ò²Ï£Íû´ó¼Ò¿ÉÒÔµã¸ö star¡£
àÅ£¬¿ÉÄÜÓÐЩÈË´ò²»¿ª demo »òÕßÒ³ÃæÂÒÁË£¬Ìù¼¸ÕÅЧ¹ûͼ£º£¨Í¼Æ¬Óеã´ó£¬ÄÍÐĵȴýÒ»»á£©
Á¢·½Ìå 3D Ðýת

3D ͸ÊÓÕÕÆ¬Ç½

ÌøÔ¾µÄÒô·û

¿ÉÄÜÉÏÃæµÄЧ¹û¶Ô¾«Í¨ CSS3 µÄ¶øÑÔС²ËÒ»µú£¬Ð´±¾ÎĵÄÄ¿µÄÒ²ÊÇÎÒ×Ô¼ºÑ§Ï°»ýÀÛµÄÒ»¸ö¹ý³Ì£¬¸ÐÐËȤµÄ¾Í¿ÉÒÔÒ»ÆðÍùÏ¿´À²¡£
Æäʵ CSS3 Ч¹ûÕæµÄºÜÇ¿´ó£¬ÉÏÃæµÄЧ¹û¶¼ÊÇ´¿ CSS ʵÏÖ£¬¸öÈ˸оõÔ½ÊÇÉîÈë CSS µÄѧϰ£¬Ô½ÊǾõµÃ×Ô¼º²»¶®
CSS £¬²»¹ý»°Ëµ»ØÀ´£¬ÕâЩЧ¹ûµÄʵÓó¡¾°²»´ó£¬µ«ÊÇ×÷Ϊһ¸öÓÐ×·ÇóµÄǰ¶Ë£¬ÎÒ¾õµÃ»¹ÊÇÓбØÒªÈ¥ºÃºÃÁ˽âÒ»ÏÂÕâЩÊôÐÔ¡£
ËùÒÔ±¾ÎĽÓÏÂÀ´Òª½²µÄ´ó¸ÅÓУº
transform-style: preserve-3d ÈýάЧ¹û
perspective and perspective-origin 3DÊӾ࣬͸ÊÓ/¾°ÉîЧ¹û
CSS3 filter CSS3Â˾µ
transparent¡¢radial-gradient ͸Ã÷Óë½¥±ä
transform-style ʵÏÖ 3D Ч¹û
ÒªÀûÓà CSS3 ʵÏÖ 3D µÄЧ¹û£¬×îÖ÷ÒªµÄ¾ÍÊǽèÖú transform-style ÊôÐÔ¡£transform-style
Ö»ÓÐÁ½¸öÖµ¿ÉÒÔÑ¡Ôñ£º
// Óï·¨£º
transform-style: flat|preserve-3d;
transform-style: flat; // ĬÈÏ£¬×ÓÔªËØ½«²»±£ÁôÆä 3D λÖÃ
transform-style: preserve-3d; // ×ÓÔªËØ½«±£ÁôÆä 3D λÖᣠ|
µ±ÎÒÃÇÖ¸¶¨Ò»¸öÈÝÆ÷µÄ transform-style µÄÊôÐÔֵΪ preserve-3d ʱ£¬ÈÝÆ÷µÄºó´úÔªËØ±ã»á¾ßÓÐ
3D Ч¹û£¬ÕâÑù˵Óеã³éÏó£¬Ò²¾ÍÊǵ±Ç°¸¸ÈÝÆ÷ÉèÖÃÁË preserve-3d Öµºó£¬ËüµÄ×ÓÔªËØ¾Í¿ÉÒÔÏà¶ÔÓÚ¸¸ÔªËØËùÔ򵀮½Ã棬½øÐÐ
3D ±äÐβÙ×÷¡£
µ±¸¸ÔªËØÉèÖÃÁË transform-style:preserve-3d ºó£¬¾Í¿ÉÒÔ¶Ô×ÓÔªËØ½øÐÐ 3D
±äÐβÙ×÷ÁË£¬3D ±äÐÎºÍ 2D ±äÐÎÒ»Ñù¿ÉÒÔ£¬Ê¹Óà transform ÊôÐÔÀ´ÉèÖ㬻òÕß¿ÉÒÔͨ¹ýÖÆ¶¨µÄº¯Êý»òÕßͨ¹ýÈýά¾ØÕóÀ´¶ÔÔªËØ±äÐͲÙ×÷£º
1¡¢Ê¹Óà translateX(length) ¡¢translateY(length) ¡¢ translateZ(length)
À´½øÐÐ 3D Î»ÒÆ²Ù×÷£¬Óë 2D ²Ù×÷Ò»Ñù£¬¶ÔÔªËØ½øÐÐÎ»ÒÆ²Ù×÷£¬Ò²¿ÉÒԺϲ¢Îª translate3d(x,y,z)
ÕâÖÖд·¨£»
2¡¢Ê¹Óà scaleX() ¡¢scaleY() ¡¢scaleY() À´½øÐÐ3D Ëõ·Å²Ù×÷£¬Ò²¿ÉÒԺϲ¢Îª
scale3d(number,number,number) ÕâÖÖд·¨£»
3¡¢Ê¹Óà rotateX(angle) ¡¢rotateY(angle) ¡¢rotateZ(angle)
À´½øÐÐ 3D Ðýת²Ù×÷£¬Ò²¿ÉÒԺϲ¢Îª rotate3d(Xangle,Yangle,Zangle) ÕâÖÖд·¨¡£
¶ÔÓÚ API µÄѧϰ£¬ÎÒ½¨ÒéÈ¥Ô´Í·¿´¿´£¬²»ÒªÂú×ãÓÚÏû·Ñ±ðÈ˵Ä×ܽᣬtransform-style API¡£
ÕâÀïÒªÌØ±ðÌá³öµÄ£¬3D ×ø±êÖᣬËùνµÄÈÆ X¡¢Y¡¢Z ÖáµÄÈý¸öÖᣬÕâ¸ö²»ÄÑ£¬¸Ð¾õ¿Õ¼äÏëÏóÀ§Äѵģ¬ÕÕ×Å
API ÊÔÊÔ£¬ÈÆÃ¿¸öÖᶼתһϾÍÃ÷°×ÁË£º

Á˽â¹ýºó£¬ÄÇôÒÀ¿¿ÉÏÃæËù˵µÄ£¬ÆäʵÎÒÃǾÍÒѾ¿ÉÒÔ×öÒ»¸öÁ¢·½Ìå³öÀ´ÁË¡£Ëùνʵ¼ù³öÕæÖª£¬ÏÂÃæ¾Í¿´¿´¸ÃÈçºÎÒ»²½²½µÃµ½Ò»¸öÁ¢·½Ìå¡£
1¡¢×¼±¸Áù¸öÕý·½ÐÎ
Õâ¸öºÃÀí½â£¬Õý·½ÌåÁù¸öÃæ£¬Ê×ÏÈÓà div ×ö³ö 6 ¸öÃæ£¬°ü¹üÔÚͬһ¸ö¸¸¼¶ÈÝÆ÷ÏÂÃæ£¬¸¸¼¶ÈÝÆ÷ÉèÖà transform-style:preserve-3d
£¬ÕâÑù½ÓÏÂÀ´¾Í¿ÉÒÔ¶Ô 6 ¸öÃæ½øÐÐ 3D ±ä»»²Ù×÷£¬ÎªÁË·½±ãÑÝʾ£¬ÎÒÓà 6 ¸öÑÕÉ«²»Ò»ÑùµÄÃæ£º

ÉÏÃæµÄͼÊÇʾÒâÓÐ 6 ¸öÃæ£¬µ±È»ÎÒÃÇÒª°Ñ 6 ¸öÕý·½ÐÎ div ÉèÖÃΪ¾ø¶Ô¶¨Î»£¬ÖصþµþÔÚÒ»Æð£¬ÄÇôӦ¸ÃÊÇÕâÑùµÄ£¬Ö»ÄÜ¿´µ½Ò»¸öÃæ£º

2¡¢¸¸ÈÝÆ÷×ö¼òµ¥µÄ±ä»»
ΪÁË×îºóµÄ¿´ÉÏÈ¥µÄЧ¹ûºÃ¿´£¬ÎÒÃÇÐèÒªÏȶԸ¸ÈÝÆ÷½øÐб任£¬ÔËÓÃÉÏÃæËµµÄ rotate ÊôÐÔ£¬½«ÈÝÆ÷µÄ½Ç¶È¸Ä±äһϣº
.cube-container{
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg);
} |
ÄÇô£¬±ä»»Ö®ºó£¬µÃµ½ÕâÑùÒ»¸öͼÐΣº

àÅ£¬Õâ¸öʱºò£¬6 ¸ö div ÃæÈÔÈ»ÊÇÖØµþÔÚÒ»ÆðµÄ¡£
3¡¢¶Ôÿ¸öÃæ×ö 3D ±ä»»
½ÓÏÂÀ´¾ÍÊǶÔÿ¸öÃæ½øÐÐ 3D ±ä»»ÁË£¬ÔËÓà rotate ¿ÉÒÔ¶Ô div Æ½Ãæ½øÐÐÐýת£¬ÔËÓà translate
¿ÉÒÔ¶Ô div Æ½Ãæ½øÐÐÆ½ÒÆ£¬¶øÇÒÒª¼ÇסÏÖÔÚÎÒÃÇÊÇÔÚÈýά¿Õ¼äÄڱ任£¬×ª°¡×ª°¡£¬ÎÒÃÇ¿ÉÄÜ»áµÃµ½ÕâÑùµÄÐÎ×´£º

ËãºÃÐýת½Ç¶ÈºÍÆ«ÒÆ¾àÀ룬×îºóÉÏÃæµÄ 6 ¸öÃæ¾Í¿ÉÒÔÍêÃÀÆ´³ÉÒ»¸öÁ¢·½Ìå¿©£¡ÎªÁËЧ¹û¸üºÃ£¬ÎÒ¸øÃ¿¸öÃæÔö¼ÓһЩ͸Ã÷¶È£¬×îºóµÃµ½Ò»¸öÍêÕûµÄÁ¢·½Ì壺

ΪÁ˸üÓÐÁ¢Ìå¸Ð£¬ÎÒÃÇ¿ÉÒÔµ÷Õû¸¸ÈÝÆ÷µÄÐýת½Ç¶È£¬Ðýת¿´ÉÏÈ¥¸üÁ¢ÌåµÄ½Ç¶È:

ÖÁ´Ë£¬Ò»¸ö 3D Á¢·½Ìå¾ÍÍê³ÉÁË¡£Ð´ÕâÆªÎÄÕµÄʱºò£¬±¾À´µ½ÕâÀÕâÒ»¿éÓ¦¸Ã¾Í½áÊøÁË£¬µ«ÊÇдµ½ÕâÀïµÄʱºò£¬Í»È»Í»·¢ÆæÏ룬¼ÈÈ»Õý·½Ìå¿ÉÒÔ£¨ÕýÁùÃæÌ壩£¬ÄÇôÕýËÄÃæÌ壬Õý°ËÃæÌåÉõÖÁÇòÌåÓ¦¸ÃÒ²ÄÜ×ö³öÀ´°É£¿
àÅ£¬Ã»Óа´×¡Ô궯µÄÐÄ£¬Á¢Âí¶¯ÊÖ³¢ÊÔÁËÒ»·¬£¬×îºó×ö³öÁËÏÂÃæµÄÁ½¸ö£º


¾Í²»ÔÙÏêϸÌÖÂÛÈçºÎÒ»²½Ò»²½µÃµ½ÕâÁ½¸öÁË£¬ÓÐÐËȤµÄ¿ÉÒÔÈ¥ÎÒµÄ github ÉÏ¿´¿´Ô´Â룬»òÕßÖ±½ÓºÍÎÒÌÖÂÛ½»Á÷£¬¼òµ¥µÄ̸̸˼·£º
CSS3 ʵÏÖÕýËÄÃæÌå
ºÍÕý·½ÌåÒ»Ñù£¬ÎÒÃÇÊ×ÏÈҪ׼±¸ 4 ¸öÈý½ÇÐΣ¨ÏÂÃæ»áÏêϸ½²ÈçºÎÀûÓà CSS3 ÖÆ×÷Ò»¸öÈý½ÇÐÎ div£©£¬×¢Òâ
4 ¸öÈý½ÇÐÎÓ¦¸ÃÊÇÖØµþÔÚÒ»ÆðµÄ£¬È»ºó½«ÆäÖÐÈý¸ö·Ö±ðÑØ×ÅÈýÌõ±ßµÄÖÐÐĵãÐýת 70.5 ¶È£¨ÕýËÄÃæÌåÁÙÃæ¼Ð½Ç£©£¬¾Í¿ÉÒԵõ½Ò»¸öÕýËÄÃæÌå¡£
×¢ÒâÑØ×ÅÈýÌõ±ßµÄÖÐÐĵãÐýת 70.5 ¶ÈÕâ¾ä»°£¬Òâ˼ÊÇÿ¸öͼÐÎÒª¶¨Î»Ò»´ÎÐýתÖÐÐÄ£¬Ò²¾ÍÊÇ transform-origin
ÊôÐÔ£¬ËüÔÊÐíÎÒÃÇÉèÖÃÐý×ªÔªËØµÄ»ùµãλÖá£
CSS3 ʵÏÖÇòÌå
ÉÏÃæµÄ GIF ͼÒòΪÌí¼ÓÁË animation ¶¯»Ð§¹û£¬¿´ÉÏÈ¥ºÜÏñÒ»¸öÇòÌåÔÚÔ˶¯£¬ÆäʵֻÓÃÁË 4
¸ö div£¬Ã¿¸ö div ÀûÓà border-radius:100% ÉèÖÃΪԲÐΣ¬È»ºóÒÔÖÐÐĵãΪ»ù×¼£¬Ã¿¸öÔ²ÐÎ
div ÈÆ Y ÖáÐýת²»Í¬µÄ½Ç¶È£¬ÔÙÈÃÕû¸öÔ²ÐÎÈÝÆ÷ÈÆ Y ÖᶯÆðÀ´£¬¾Í¿ÉÒԵõ½ÕâÑùÒ»¸öЧ¹ûÁË¡£
perspective and perspective-origin 3DÊӾ࣬͸ÊÓ/¾°ÉîЧ¹û
¼ÌÐøËµ 3D £¬½ÓÏÂÀ´ÒªËµµÄÊôÐÔÊÇ persepective ºÍ perspective-origin
¡£
persepective
// Óï·¨
perspective: number|none; |
perspective Ϊһ¸öÔªËØÉèÖÃÈýά͸ÊӵľàÀ룬½ö×÷ÓÃÓÚÔªËØµÄºó´ú£¬¶ø²»ÊÇÆäÔªËØ±¾Éí¡£
¼òµ¥À´Ëµ£¬µ±ÔªËØÃ»ÓÐÉèÖà perspective ʱ£¬Ò²¾ÍÊǵ± perspective:none/0
ʱËùÓкó´úÔªËØ±»Ñ¹ËõÔÚͬһ¸ö¶þÎ¬Æ½ÃæÉÏ£¬²»´æÔÚ¾°ÉîµÄЧ¹û¡£
¶øÈç¹ûÉèÖà perspective ºó£¬½«»á¿´µ½ÈýάµÄЧ¹û¡£
perspective-origin
perspective-origin ±íʾ 3D ÔªËØÍ¸ÊÓÊӽǵĻùµãλÖã¬Ä¬ÈϵÄ͸ÊÓÊÓ½ÇÖÐÐÄÔÚÈÝÆ÷ÊÇ
perspective ËùÔÚµÄÔªËØ£¬¶ø²»ÊÇËûµÄºó´úÔªËØµÄÖе㣬Ҳ¾ÍÊÇ perspective-origin:
50% 50%¡£
// Óï·¨
perspective-origin: x-axis y-axis;
// x-axis : ¶¨Òå¸ÃÊÓͼÔÚ x ÖáÉϵÄλÖá£Ä¬ÈÏÖµ£º50%
// y-axis : ¶¨Òå¸ÃÊÓͼÔÚ y ÖáÉϵÄλÖá£Ä¬ÈÏÖµ£º50% |
ÖµµÃ×¢ÒâµÄÊÇ£¬CSS3 3D ±ä»»ÖеÄ͸ÊÓµÄ͸ÊÓµãÊÇÔÚä¯ÀÀÆ÷µÄǰ·½¡£
˵×ÜÊǺÜÄÑÀí½â£¬ÔËÓÃÉÏÃæÎÒÃÇ×ö³öÀ´µÄÕý·½ÌåÊÔÑéһϣ¬ÎÒÉèÖÃÁËÕý·½ÌåµÄ±ß³¤Îª 50 px £¬ÕâÀïÉèÖÃÕý·½ÌåÈÝÆ÷
cuber-inner µÄ persepective µÄΪ 100 px£¬¶ø perspective-origin
±£³ÖΪĬÈÏÖµ£º
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 100px;
perspective: 100px; |
ÉÏÃæÕâÑùÉèÖã¬Ò²¾ÍÊÇÏ൱ÓÚÎÒÕ¾ÔÚ 100px µÄ³¤¶ÈÍâÈ¥¿´Õâ¸öÁ¢·½Ì壬Ч¹ûÈçÏ£º

ͨ¹ýµ÷Õû persepective ºÍ perspective-origin µÄÖµ£¬¿ÉÒÔ¿´µ½²»Ò»ÑùµÄͼÐΣ¬Õâ¸öºÜºÃÀí½â£¬ÎÒÃǹ۲âÒ»¸öÎïÌåµÄ½Ç¶ÈºÍ¾àÀëÎïÌåµÄ¾àÀë²»¶Ï·¢Éú¸Ä±ä£¬ÎÒÃÇ¿´µÄÎïÌåÒ²ÊDz»Ò»ÑùµÄ£¬àÅÏëÏóÒ»ÏÂСѧ¿ÎÎÄ£¬ÑîÌÒºÍÐÇÐÇ£¬¾ÍÄÜÈÝÒ×Ã÷°×ÁË¡£
ÐèÒªÌá³öµÄÊÇ£¬ÎÒÉÏÃæµÄ¼¸¸öÕý¶àÃæÌåͼÐκÍÇòÐÎͼÐÎÊÇûÓмÓÉÏ persepective ÖµµÄ£¬¸ÐÐËȤµÄ¿ÉÒÔ¼ÓÉÏÊÔһϿ´¿´Ð§¹û¡£
3D ͸ÊÓÕÕÆ¬Ç½
»Øµ½ÎÄÕÂÒ»¿ªÊ¼ÎÒÌùµÄÄǸö 3D ÕÕÆ¬Ç½£¬ÔËÓà transform-style: preserve-3d
ºÍ persepective £¬¿ÉÒÔ×ö³öЧ¹ûºÜºÃµÄÕâÖÖ 3D ÕÕÆ¬Ç½ÐýתЧ¹û¡£
´úÂë¾Í²»ÌùÁË£¬±¾ÎÄÒѾºÜ³¤ÁË£¬Ö»ÊǼòµ¥µÄ̸̸ÔÀí£¬¸ÐÐËȤµÄÈ¥°ÇÔ´Âë¿´¿´¡£
1¡¢ÉèÁ¢Ò»¸öÎę̀£¬Ò²¾ÍÊǰü¹üÐýתµÄͼƬÃǵÄÈÝÆ÷£¬¸øËûÉèÖÃÒ»¸ö persepective ¾àÀ룬ÒÔ¼° transform-style:
preserve-3d Èúó´ú¿ÉÒÔ½øÐÐ 3D ±ä»»£»
2¡¢×¼±¸ N ÕÅͼƬÖÃÓÚÈÝÆ÷ÄÚ²¿£¬N µÄ´óС¿´¸öÈËϲºÃÁË£¬Í¼Æ¬µÄ 3D ÐýתľÂíЧ¹ûÊÇÀàËÆ¸Ö¹ÜÎèÐýתµÄÔ˶¯£¬Òò´ËÊÇÈÆ
Y ÖáµÄ£¬ÎÒÃǹØÐĵÄÊÇ rotateY µÄ´óС£¬¸ù¾ÝÎÒÃÇÌí¼ÓµÄͼƬÊýÁ¿£¬Óà 360¡ã µÄÔ²Öܽǽ«Ã¿¸öͼƬµÈ·Ö£¬Ò²¾ÍÊÇÈÃÿÕÅÍ¼Æ¬ÈÆ
Y ÖáÐýת¹Ì¶¨½Ç¶ÈÒÀ´ÎÉ¢¿ª£º£¨ÏÂÃæµÄͼΪʾÒâЧ¹û£¬ÎÒµ÷ÕûÁËһϽǶȺÍ͸Ã÷¶È£©

3¡¢Õâ¸öʱºò£¬N ÕÅͼ¿Ï¶¨ÊÇÖØºÏµþÔÚÁËÒ»Æð£¬ËùÒÔÕâÀï¹Ø¼üÒ»²½ÊÇÔËÓà translateZ(length)
ÈÃÍ¼Æ¬ÑØ Z ÖáÆ½ÒÆ£¬Ò²¾ÍÊÇÔËÓà translateZ ¿ÉÒÔÈÃͼƬÀëÎÒÃǸü½ü»òÕ߸üÔ¶£¬ÒòΪÉÏÒ»²½ÉèÖÃÁËͼƬ²»Í¬µÄ
rotateY() ½Ç¶È£¬ËùÒÔ N ÕÅͼƬÉ趨һ¸ö translateZ ºó£¬Í¼Æ¬¾ÍºÜ×ÔÈ»ÒÔÖеãΪԲÐÄ·ÖÉ¢¿ªÁË£¬Ò²¾ÍÊÇÕâÑù£º

4¡¢×îºóÀûÓà animation £¬ÎÒÃÇÈÃÎę̀£¬Ò²¾ÍÊǰü¹ü×ÅͼƬµÄÈÝÆ÷ÈÆ Y ÖáÐýתÆðÀ´£¨rotateY£©£¬ÄÇôһ¸öÀàËÆÐýתľÂíµÄ
3D ÕÕÆ¬Ç½Ð§¹û¾ÍÍê³ÉÁË£¡
ÕâÀïҪעÒâµÄÒ»µãÊÇÉèÖÃµÄ persepective ÖµºÍµ¥¸öͼƬ translateZ(length)
µÄÖµ£¬persepective Ò»¶¨Òª±È translateZ(length) µÄÖµ´ó£¬·ñÔò¾ÍÊÇÏ൱ÓÚÎę̀ÅÜÄãÉíºóÈ¥ÁË£¬¿Ï¶¨ÊÇ¿´²»µ½Ð§¹ûÁË¡£
±¾À´Ïë¼ÌÐøËµ
CSS3 filter CSS3Â˾µ
transparent¡¢radial-gradient ͸Ã÷Óë½¥±ä
ÕâЩ¸ö¿ÉÒÔÈö¯»Ð§¹û±äµÃ¸üÔÞµÄһЩ CSS3 ÊôÐÔ£¬µ«ÊǾõµÃ±¾ÎÄÆª·ùÒѾºÜ³¤£¬¶øÇÒÕâÁ½¸öÊôÐÔÓÐµãÆ«ÀëÖ÷Ì⣬´òËãÁíÆðÒ»ÎÄ£¬ÔÙ×öÉîÈë̽¾¿¡£
ÔÙ˵Á½µã±¾ÎÄûÓÐ̸µ½µÄ£¬µ«ÊǺÜÓÐÓô¦µÄСϸ½Ú£¬¸ÐÐËȤµÄ¿ÉÒÔÈ¥Á˽âÁ˽⣬Ҳ»áÔÚ½ÓÏÂÀ´½øÐÐÏêϸ̽ÌÖ£º
1¡¢Ê¹Óà transform3d api ´úÌæ transform api£¬Ç¿ÖÆ¿ªÆô GPU ¼ÓËÙ£¬ÌáÉýÍøÕ¾¶¯»äÖȾÐÔÄÜ£»
2¡¢Ê¹Óà CSS3 will-change Ìá¸ßÒ³Ãæ¹ö¶¯¡¢¶¯»µÈäÖȾÐÔÄÜ |