[{"data":1,"prerenderedAt":76},["ShallowReactive",2],{"content:\u002Farticles:6856":3},{"item":4,"md":16,"html":17,"menu":18,"excerpt":29,"related":30},{"title":5,"len":6,"tags":7,"id":10,"time":11,"modifyTime":12,"showComments":13,"encrypt":14,"customSlug":15},"用React实现跟随鼠标的3D透视效果",863,[8,9],"前端","react",6856,1731479185023,1734350101562,true,false,"",null,"\u003Ch2 data-marked-line=\"1\">\u003Csup class=\"fake-head\" id=\"%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA\">效果展示\u003C\u002Fa>\u003C\u002Fh2>\u003Cp data-marked-line=\"2\">在下面的图形上移动鼠标即可看到效果\u003C\u002Fp>\n\u003Cspan data-marked-line=\"4\" class=\"raw-html\">\u003Ciframe width=\"90%\" height=\"700\" style=\"margin: 10px 5%;\" src=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fvitejs-vite-quevnkzt?embed=1&file=src%2Fmain.tsx&hideExplorer=1&hideNavigation=1&view=preview\" frameborder=\"0\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\u003C\u002Fiframe>\u003C\u002Fspan>\u003Ch2 data-marked-line=\"6\">\u003Csup class=\"fake-head\" id=\"%E9%9C%80%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84%E7%9F%A5%E8%AF%86\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E9%9C%80%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84%E7%9F%A5%E8%AF%86\">需要用到的知识\u003C\u002Fa>\u003C\u002Fh2>\u003Cul data-marked-line=\"7\">\n\u003Cli>CSS perspective，参考\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fperspective\" target=\"_blank\">MDN\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>CSS transform-style，同样参考\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftransform-style\" target=\"_blank\">MDN\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 data-marked-line=\"10\">\u003Csup class=\"fake-head\" id=\"%E4%BB%A3%E7%A0%81%E9%83%A8%E5%88%86\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E4%BB%A3%E7%A0%81%E9%83%A8%E5%88%86\">代码部分\u003C\u002Fa>\u003C\u002Fh2>\u003Cp data-marked-line=\"11\">  其实核心的逻辑和React关联性不大，只是我正好用React来做的\u003Cimg src=\"\u002Fsticker\u002Faru\u002F82.png\" alt=\"sticker\"\u002F>，直接参考\u003Ca href=\"https:\u002F\u002Fjsfiddle.net\u002Fyunyuyuan123\u002Fukqstdw6\u002F95\u002F\" target=\"_blank\">https:\u002F\u002Fjsfiddle.net\u002Fyunyuyuan123\u002Fukqstdw6\u002F95\u002F\u003C\u002Fa>，主要关注这几个部分：\u003C\u002Fp>\n\u003Cul data-marked-line=\"12\">\n\u003Cli>使用\u003Ccode>requestAnimationFrame\u003C\u002Fcode>来保证动画过度的流畅性。\u003C\u002Fli>\n\u003Cli>通过\u003Ccode>translateZ\u003C\u002Fcode>来控制Z轴的高度，从而实现层次感。\u003C\u002Fli>\n\u003Cli>使用CSS新属性\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fwill-change\" target=\"_blank\">\u003Ccode>will-change\u003C\u002Fcode>\u003C\u002Fa>来提升性能。\u003C\u002Fli>\n\u003C\u002Ful>\n",[19,23,26],{"size":20,"text":21,"url":22},"big","效果展示","%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA",{"size":20,"text":24,"url":25},"需要用到的知识","%E9%9C%80%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84%E7%9F%A5%E8%AF%86",{"size":20,"text":27,"url":28},"代码部分","%E4%BB%A3%E7%A0%81%E9%83%A8%E5%88%86","效果展示 在下面的图形上移动鼠标即可看到效果 需要用到的知识 CSS perspective，参考MDN CSS transform-style，同样参考MDN 代码部分 其实核心的逻辑和React关联性不大，只是我正好用React来做的 ，直接参考https:\u002F\u002Fjsfiddle.net\u002Fyuny…",[31,43,50,57,67],{"item":32,"count":42},{"title":33,"len":34,"tags":35,"id":38,"time":39,"modifyTime":40,"showComments":13,"encrypt":14,"customSlug":41},"关于本站的重构 (又双叒叕重构了)",1503,[8,36,37],"vue","杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":44,"count":42},{"title":45,"len":46,"tags":47,"id":48,"time":49,"modifyTime":49,"encrypt":14,"showComments":13,"customSlug":15},"vue3用于管理axios异步请求一致性的功能函数",3227,[36,8],9820,1725014139074,{"item":51,"count":42},{"title":52,"len":53,"tags":54,"id":55,"time":56,"modifyTime":56,"encrypt":14,"showComments":13,"customSlug":15},"Nuxt3创建SSE server以及client的简明教程",1905,[8,36],5449,1720261091923,{"item":58,"count":42},{"title":59,"len":60,"tags":61,"id":64,"time":65,"modifyTime":66,"encrypt":14,"showComments":13,"customSlug":15},"树莓派监控摄像头制作",1673,[62,63,8],"树莓派","python",1010,1669896775319,1679559691141,{"item":68,"count":42},{"title":69,"len":70,"tags":71,"id":73,"time":74,"modifyTime":75,"encrypt":14,"showComments":13,"customSlug":15},"终极白嫖：使用免费MongoDB显示浏览量",4391,[8,72],"数据库",9812,1668791055520,1683773643807,1793351205604]