CSS3ã§ä½œã‚‹ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãª3Dè¡¨ç¾ (1/2)ダイナミックã«åˆ‡ã‚Šæ›¿ã‚るページナビゲーション 一見ã™ã‚‹ã¨ã‚·ãƒ³ãƒ—ルãªãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚µã‚¤ãƒˆã€ŒHUMAANã€ã€‚ãã®é…力ã¯ã€ç´°éƒ¨ã¾ã§ä½œã‚Šè¾¼ã¾ã‚ŒãŸã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã«ã‚る。ä¸ã§ã‚‚目を引ãã®ãŒã€ãƒ•ãƒ«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã§å±•é–‹ã•ã‚Œã‚‹ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªå¤‰å½¢ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã 。何気ãªã下部ã®ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‚’クリックã™ã‚‹ã¨ã€ãƒšãƒ¼ã‚¸å…¨ä½“ãŒå¤§ãã回転ã—ãªãŒã‚‰åˆ‡ã‚Šæ›¿ã‚る。ãã®å‹•ããŒéžå¸¸ã«æ°—æŒã¡ã‚ˆãã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ã†ã¾ãé…ã›ã‚‹ç´ 敵ãªä»•æŽ›ã‘ã 。 ã“ã®3D回転ã¯ã€é€£è¼‰ç¬¬1回「CSS Transitionsを使ã£ãŸ3Dãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã®ã‚¢ã‚¤ãƒ‡ã‚¢ã€ã§ç´¹ä»‹ã—ãŸ3D変形ã¨åŒã˜ä»•çµ„ã¿ã§å®Ÿè£…ã•ã‚Œã¦ã„る。今回ã¯ã€3D回転ã«ã‚ˆã‚‹ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªã‚³ãƒ³ãƒ†ãƒ³ãƒ„切り替ãˆã«ã¤ã„ã¦ã€ç¬¬1回ã®è¨˜äº‹ã‚’ヒントã«å†ç¾ã—ã¦ã¿ã‚ˆã†ã€‚ STEP 1：3Dã®æ§‹é€ を考ãˆã‚‹ 最åˆã«ã€ãƒšãƒ¼ã‚¸å…¨ä½“を回転ã•ã›ã‚‹ãŸã‚ã€ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã¨åŒã˜å¤§ãã•ã®2ã¤ã®é¢ï¼ˆdivè¦ç´ ）を用æ„ã—ã€transformプãƒãƒ‘ティã§å¤‰å½¢ã•
æœã‹ã‚‰ã‚¤ãƒ©ãƒ¬ã§ãã‚‹ãるリボン
{{#tags}}- {{label}}
{{/tags}}