"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", button: "button", code: "code", div: "div", figcaption: "figcaption", figure: "figure", h2: "h2", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", script: "script", span: "span", style: "style", ul: "ul", ..._provideComponents(), ...props.components }, {Accordion, PokemonCard} = _components; if (!Accordion) _missingMdxReference("Accordion", true); if (!PokemonCard) _missingMdxReference("PokemonCard", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["在網路上看到 ", _jsx(_components.a, { href: "https://github.com/simeydotme/pokemon-cards-css", children: "pokemon-cards-css" }), " 把寶可夢卡牌的 3D 及閃膜用純 CSS 做出來，真的超帥！這篇整理我理解原始碼並自己實作的過程。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "1-卡片骨架", children: "1. 卡片骨架" }), "\n", _jsx(_components.p, { children: "卡片的 DOM 結構只有三層 div：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: ".cardContainer" }), "：卡片的容器，用來置中卡片並設定比例。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: ".card" }), "：卡片本身，負責建立 3D 空間。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: ".rotator" }), "：實際執行 3D 旋轉的元素"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "expressive-code", children: [_jsx(_components.style, { children: ".expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);font-weight:var(--ec-uiFontWg);line-height:var(--ec-uiLineHt);text-size-adjust:none;-webkit-text-size-adjust:none}.expressive-code *:not(:is(svg, svg *)){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre > code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);font-weight:var(--ec-codeFontWg);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre.wrap .ec-line .code{white-space:pre-wrap;overflow-wrap:break-word;min-width:min(20ch, var(--ecMaxLine, 20ch))}.expressive-code pre.wrap .ec-line .code span.indent{white-space:pre}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{direction:ltr;unicode-bidi:isolate;display:grid;grid-template-areas:'gutter code';grid-template-columns:auto 1fr;position:relative}.expressive-code .ec-line .gutter{grid-area:gutter;color:var(--ec-gtrFg)}.expressive-code .ec-line .gutter > *{pointer-events:none;user-select:none;-webkit-user-select:none}.expressive-code .ec-line .gutter ~ .code{--ecLineBrdCol:var(--ec-gtrBrdCol)}.expressive-code .ec-line.highlight .gutter{color:var(--ec-gtrHlFg)}.expressive-code .ec-line .code{grid-area:code;position:relative;box-sizing:content-box;padding-inline-start:calc(var(--ecIndent, 0ch) + var(--ec-codePadInl) - var(--ecGtrBrdWd));padding-inline-end:var(--ec-codePadInl);text-indent:calc(var(--ecIndent, 0ch) * -1)}.expressive-code .ec-line .code::before,.expressive-code .ec-line .code::after,.expressive-code .ec-line .code :where(*){text-indent:0}.expressive-code .ec-line .code{--ecGtrBrdWd:var(--ec-gtrBrdWd);border-inline-start:var(--ecGtrBrdWd) solid var(--ecLineBrdCol, transparent)}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol:var(--ec-tm-markBg)}.expressive-code .ec-line.mark .code{--ecLineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol:var(--ec-tm-insBg);--tmLabel:var(--ec-tm-insDiffIndContent)}.expressive-code .ec-line.ins .code{--ecLineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins .code::before{color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol:var(--ec-tm-delBg);--tmLabel:var(--ec-tm-delDiffIndContent)}.expressive-code .ec-line.del .code{--ecLineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del .code::before{color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{background:var(--tmLineBgCol)}.expressive-code .ec-line.mark .code,.expressive-code .ec-line.ins .code,.expressive-code .ec-line.del .code{--ecGtrBrdWd:var(--ec-tm-lineMarkerAccentWd)}.expressive-code .ec-line.mark .code::before,.expressive-code .ec-line.ins .code::before,.expressive-code .ec-line.del .code::before{display:block;position:absolute;left:0;box-sizing:border-box;content:var(--tmLabel, ' ');padding-inline-start:var(--ec-tm-lineDiffIndMargLeft);text-align:center;white-space:pre}.expressive-code .ec-line.mark.tm-label .code::before,.expressive-code .ec-line.ins.tm-label .code::before,.expressive-code .ec-line.del.tm-label .code::before{background:var(--ecLineBrdCol);padding:0 calc(var(--ec-tm-lineMarkerLabelPadInl) + var(--ec-tm-lineMarkerAccentWd)) 0 var(--ec-tm-lineMarkerLabelPadInl);color:var(--ec-tm-lineMarkerLabelCol)}.expressive-code .ec-line mark{--tmInlineBgCol:var(--ec-tm-markBg);--tmInlineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol:var(--ec-tm-insBg);--tmInlineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol:var(--ec-tm-delBg);--tmInlineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL:var(--ec-tm-inlMarkerBrdWd);--tmBrdR:var(--ec-tm-inlMarkerBrdWd);--tmRadL:var(--ec-tm-inlMarkerBrdRad);--tmRadR:var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL:0px;--tmRadL:0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR:0px;--tmRadR:0}.expressive-code .ec-line mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:'';position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius:calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing:0.4rem;--code-background:var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:'\\a0'}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing:calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:'';position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:'';position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing:calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background:var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:'';position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:var(--ec-frm-trmIcon);-webkit-mask-repeat:no-repeat;mask-image:var(--ec-frm-trmIcon);mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:'';position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2)}@media (scripting: none){.expressive-code .copy{display:none}}.expressive-code .copy{direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:'';position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:var(--ec-frm-copyIcon);-webkit-mask-repeat:no-repeat;mask-image:var(--ec-frm-copyIcon);mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size:0.35rem;--tooltip-bg:var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:'';position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code{}.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),.expressive-code .frame .copy .feedback.show ~ button:not(:hover){opacity:0.75}}.expressive-code :nth-child(1 of .ec-line) .code{padding-inline-end:calc(2rem + var(--ec-codePadInl))}.expressive-code .gutter .ln{display:inline-flex;justify-content:flex-end;align-items:flex-start;box-sizing:content-box;min-width:var(--lnWidth, 2ch);padding-inline:2ch;color:var(--ec-lineNumbers-fg)}.highlight .expressive-code .gutter .ln{color:var(--ec-lineNumbers-hlFg)}:root,:root:not([data-theme='one-dark-pro']) .expressive-code[data-theme='one-dark-pro']{--ec-brdRad:0.3rem;--ec-brdWd:1.5px;--ec-brdCol:#3c424e;--ec-codeFontFml:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;--ec-codeFontSize:0.85rem;--ec-codeFontWg:400;--ec-codeLineHt:1.65;--ec-codePadBlk:1rem;--ec-codePadInl:1.35rem;--ec-codeBg:#282c34;--ec-codeFg:#abb2bf;--ec-codeSelBg:#67769660;--ec-gtrFg:#767c89;--ec-gtrBrdCol:#767c8933;--ec-gtrBrdWd:1.5px;--ec-gtrHlFg:#abb2bfd2;--ec-uiFontFml:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--ec-uiFontSize:0.9rem;--ec-uiFontWg:400;--ec-uiLineHt:1.65;--ec-uiPadBlk:0.25rem;--ec-uiPadInl:1rem;--ec-uiSelBg:#2c313a;--ec-uiSelFg:#d7dae0;--ec-focusBrd:#3e4452;--ec-sbThumbCol:#4e566660;--ec-sbThumbHoverCol:#60697afd;--ec-tm-lineMarkerAccentMarg:0rem;--ec-tm-lineMarkerAccentWd:0.15rem;--ec-tm-lineMarkerLabelPadInl:0.2rem;--ec-tm-lineMarkerLabelCol:white;--ec-tm-lineDiffIndMargLeft:0.3rem;--ec-tm-inlMarkerBrdWd:1.5px;--ec-tm-inlMarkerBrdRad:0.2rem;--ec-tm-inlMarkerPad:0.15rem;--ec-tm-insDiffIndContent:'+';--ec-tm-delDiffIndContent:'-';--ec-tm-markBg:#264a8980;--ec-tm-markBrdCol:#5570b3d0;--ec-tm-insBg:#26561c80;--ec-tm-insBrdCol:#4e7e41d0;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delBrdCol:#ae594fd0;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#0000005b;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #0000005b;--ec-frm-edActTabBg:#282c34;--ec-frm-edActTabFg:#dcdcdc;--ec-frm-edActTabBrdCol:transparent;--ec-frm-edActTabIndHt:1.5px;--ec-frm-edActTabIndTopCol:null;--ec-frm-edActTabIndBtmCol:#b4b4b4;--ec-frm-edTabsMargInlStart:0;--ec-frm-edTabsMargBlkStart:0;--ec-frm-edTabBrdRad:0.3rem;--ec-frm-edTabBarBg:#21252b;--ec-frm-edTabBarBrdCol:#3c424e;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#282c34;--ec-frm-trmTtbFg:#9da5b4;--ec-frm-trmTtbDotsFg:#9da5b4;--ec-frm-trmTtbDotsOpa:0.15;--ec-frm-trmTtbBg:#2d2d2d;--ec-frm-trmTtbBrdBtmCol:#2d2d2d;--ec-frm-trmBg:#282c34;--ec-frm-inlBtnFg:#abb2bf;--ec-frm-inlBtnBg:#abb2bf;--ec-frm-inlBtnBgIdleOpa:0;--ec-frm-inlBtnBgHoverOrFocusOpa:0.2;--ec-frm-inlBtnBgActOpa:0.3;--ec-frm-inlBtnBrd:#abb2bf;--ec-frm-inlBtnBrdOpa:0.4;--ec-frm-tooltipSuccessBg:#5c7f42;--ec-frm-tooltipSuccessFg:white;--ec-frm-copyIcon:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.75'%3E%3Cpath%20d%3D'M3%2019a2%202%200%200%201-1-2V2a2%202%200%200%201%201-1h13a2%202%200%200%201%202%201'%2F%3E%3Crect%20x%3D'6'%20y%3D'5'%20width%3D'16'%20height%3D'18'%20rx%3D'1.5'%20ry%3D'1.5'%2F%3E%3C%2Fsvg%3E\");--ec-frm-trmIcon:url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034%2010%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%0A%20%20%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%23ff5f56%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2217%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%23ffbd2e%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2229%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%2327c93f%22%2F%3E%0A%3C%2Fsvg%3E%0A\");--ec-lineNumbers-fg:inherit;--ec-lineNumbers-hlFg:inherit}.expressive-code .ec-line :where(span[style^='--']:not([class])),:root:not([data-theme='one-dark-pro']) .expressive-code[data-theme='one-dark-pro'] .ec-line :where(span[style^='--']:not([class])){color:var(--0, inherit);background-color:var(--0bg, transparent);font-style:var(--0fs, inherit);font-weight:var(--0fw, inherit);text-decoration:var(--0td, inherit)}" }), _jsx(_components.script, { type: "module", children: "try{(()=>{function a(e){if(!e)return;let t=e.getAttribute(\"tabindex\")!==null,r=e.scrollWidth>e.clientWidth;r&&!t?(e.setAttribute(\"tabindex\",\"0\"),e.setAttribute(\"role\",\"region\")):!r&&t&&(e.removeAttribute(\"tabindex\"),e.removeAttribute(\"role\"))}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),s=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,r,n;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),r&&clearTimeout(r),n&&s(n),r=setTimeout(()=>{n&&s(n),n=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function i(e,t){e.querySelectorAll?.(\".expressive-code pre > code\").forEach(r=>{let n=r.parentElement;n&&t.observe(n)})}var d=l(a);i(document,d);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(r=>{i(r,d)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener(\"astro:page-load\",()=>{i(document,d)});})();}catch(e){console.error(\"[EC] tabindex-js-module failed:\",e)}" }), _jsx(_components.script, { type: "module", children: "try{(()=>{function i(o){let e=document.createElement(\"pre\");Object.assign(e.style,{opacity:\"0\",pointerEvents:\"none\",position:\"absolute\",overflow:\"hidden\",left:\"0\",top:\"0\",width:\"20px\",height:\"20px\",webkitUserSelect:\"auto\",userSelect:\"all\"}),e.ariaHidden=\"true\",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand(\"copy\")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\\u007f/g,`\n`);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(\".feedback\"))return;let t=document.createElement(\"div\");t.classList.add(\"feedback\"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add(\"show\"));let c=()=>!t||t.classList.remove(\"show\"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener(\"blur\",c),t.addEventListener(\"transitioncancel\",d),t.addEventListener(\"transitionend\",d)}function s(o){o.querySelectorAll?.(\".expressive-code .copy button\").forEach(e=>e.addEventListener(\"click\",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener(\"astro:page-load\",()=>{s(document)});})();}catch(e){console.error(\"[EC] copy-js-module failed:\",e)}" }), _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.jsx" }) }), _jsx(_components.pre, { "data-language": "jsx", className: "wrap", style: { "--ecMaxLine": "31ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "div" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66", "--0fs": "italic" }, children: "className" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'cardContainer'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ">" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "div" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66", "--0fs": "italic" }, children: "className" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'card'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ">" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "div" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66", "--0fs": "italic" }, children: "className" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'rotator'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ">" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "6ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "img" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66", "--0fs": "italic" }, children: "src" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'圖片網址'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " />" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "" })] }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": "

", children: _jsx(_components.div, {}) }) })] })] }), "\n", _jsx(_components.p, { children: "搭配 CSS 讓卡片擁有 3D 空間：" }), "\n", _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.module.css" }) }), _jsx(_components.pre, { "data-language": "css", className: "wrap", style: { "--ecMaxLine": "69ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#D19A66" }, children: ".cardContainer" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "display: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "flex" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "justify-content: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "center" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "align-items: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "center" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" }) }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#D19A66" }, children: ".card" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "/* 透視深度，數值越小，透視變形的效果越強 */" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "perspective: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "600" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "px" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "/* 讓裡面的子元素都位於 3D 空間 */" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "transform-style: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "preserve-3d" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" }) }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#D19A66" }, children: ".rotator" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "position: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "relative" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "transform-style: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "preserve-3d" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "transform-origin: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "center" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "/* 利用 CSS 變數控制轉動，初始值為 0 */" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "transform: " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "rotateY" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "var" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "--rotate-y" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ")) " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "rotateX" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "var" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "--rotate-x" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "));" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" }) }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": ".cardContainer { display: flex; justify-content: center; align-items: center;}.card { /* 透視深度，數值越小，透視變形的效果越強 */ perspective: 600px; /* 讓裡面的子元素都位於 3D 空間 */ transform-style: preserve-3d;}.rotator { position: relative; transform-style: preserve-3d; transform-origin: center; /* 利用 CSS 變數控制轉動，初始值為 0 */ transform: rotateY(var(--rotate-y, 0)) rotateX(var(--rotate-x, 0));}", children: _jsx(_components.div, {}) }) })] }) }), "\n", _jsx(_components.p, { children: "這樣一來，我們的卡片就已經具備了 3D 的基礎，雖然現在看起來還不會動。" }), "\n", _jsx(PokemonCard, { stage: "structure" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "2-卡片隨滑鼠傾斜", children: "2. 卡片隨滑鼠傾斜" }), "\n", _jsx(_components.p, { children: "接著，我們需要用到 JavaScript 讓卡片可以偵測到滑鼠的位置，並跟著傾斜。" }), "\n", _jsxs(_components.p, { children: ["在 ", _jsx(_components.code, { children: ".card" }), " 上綁定 ", _jsx(_components.code, { children: "onMouseMove" }), " 事件："] }), "\n", _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.jsx" }) }), _jsx(_components.pre, { "data-language": "jsx", className: "wrap", style: { "--ecMaxLine": "55ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "onMouseMove" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#E6888F", "--0fs": "italic" }, children: "e" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "=>" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "rect" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "e" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "currentTarget" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "getBoundingClientRect" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "();" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "x" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "e" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "clientX" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "-" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "rect" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "left" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "y" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "e" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "clientY" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "-" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "rect" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "top" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "xp" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "Math" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "round" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "((" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "x" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "/" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "rect" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "width" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "*" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "100" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "yp" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "Math" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "round" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "((" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "y" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "/" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "rect" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "height" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "*" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "100" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "dx" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "xp" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "-" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "50" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "dy" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "yp" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "-" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "50" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "setCardVars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "({" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--pointer-x'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "`" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "${" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "xp" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "}" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "%`" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--pointer-y'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "`" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "${" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "yp" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "}" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "%`" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--rotate-x'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "`" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "${" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "dy" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "/" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "}" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "deg`" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "// Y 軸偏移量拿來轉 X 軸" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--rotate-y'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "`" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "${" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "-" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "dx" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "/" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "3.5" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "}" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "deg`" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "// X 軸偏移量拿來轉 Y 軸" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--rotator-transition'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'120ms'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "});" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "};" }) }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": "const onMouseMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xp = Math.round((x / rect.width) * 100); const yp = Math.round((y / rect.height) * 100); const dx = xp - 50; const dy = yp - 50; setCardVars({ '--pointer-x': `${xp}%`, '--pointer-y': `${yp}%`, '--rotate-x': `${dy / 2}deg`, // Y 軸偏移量拿來轉 X 軸 '--rotate-y': `${-dx / 3.5}deg`, // X 軸偏移量拿來轉 Y 軸 '--rotator-transition': '120ms', });};", children: _jsx(_components.div, {}) }) })] }) }), "\n", _jsx(_components.p, { children: "程式碼的邏輯很單純：" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "取得滑鼠在卡片內的座標 (x, y)" }), "\n", _jsx(_components.li, { children: "將座標轉換成百分比 (xp, yp)" }), "\n", _jsx(_components.li, { children: "計算滑鼠位置與卡片中心的偏移量 (dx, dy)" }), "\n", _jsxs(_components.li, { children: ["根據偏移量去設定 ", _jsx(_components.code, { children: "--rotate-x" }), "、", _jsx(_components.code, { children: "--rotate-y" }), " 等 CSS 變數，卡片就會跟著旋轉了！"] }), "\n"] }), "\n", _jsx(_components.p, { children: "記得再透過 setCardVars 設定 CSS 變數，卡片就會神奇地動起來了！" }), "\n", _jsx(Accordion, { variant: "secondary", title: "如何使用 JS 設定 CSS 變數？", children: _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.jsx" }) }), _jsx(_components.pre, { "data-language": "jsx", className: "wrap", style: { "--ecMaxLine": "58ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "cardRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "useRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "null" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "pointerStateRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "useRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "x" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "50" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "y" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "50" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " });" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "setCardVars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#E6888F", "--0fs": "italic" }, children: "vars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "=>" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "node" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "cardRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "current" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "if" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "!" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "node" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "return" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "for" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " [" }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "k" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "v" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "] " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "of" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "Object" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "entries" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "vars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ")) {" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "node" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "style" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "setProperty" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "k" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "v" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "if" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "k" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "===" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--pointer-x'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "6ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "n" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "parseFloat" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "v" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "6ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "if" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "!" }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "Number" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "isNaN" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "n" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ")) " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "pointerStateRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "current" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "x" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "n" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "if" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "k" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "===" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--pointer-y'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "6ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "n" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "parseFloat" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "v" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "6ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "if" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "!" }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "Number" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "isNaN" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "n" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ")) " }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "pointerStateRef" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E5C07B" }, children: "current" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "y" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "n" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" }) }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "};" }) }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": "const cardRef = useRef(null);const pointerStateRef = useRef({ x: 50, y: 50 });const setCardVars = (vars) => {const node = cardRef.current;if (!node) return;for (const [k, v] of Object.entries(vars)) {node.style.setProperty(k, v); if (k === '--pointer-x') { const n = parseFloat(v); if (!Number.isNaN(n)) pointerStateRef.current.x = n; } if (k === '--pointer-y') { const n = parseFloat(v); if (!Number.isNaN(n)) pointerStateRef.current.y = n; }}};", children: _jsx(_components.div, {}) }) })] }) }) }), "\n", _jsx(_components.p, { children: "當滑鼠移開時，也要記得把卡片轉回原位：" }), "\n", _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.jsx" }) }), _jsx(_components.pre, { "data-language": "jsx", className: "wrap", style: { "--ecMaxLine": "36ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "onMouseLeave" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " () " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "=>" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "setCardVars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "({" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--rotate-x'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'0deg'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--rotate-y'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'0deg'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--rotator-transition'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'600ms'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "});" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "};" }) }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": "const onMouseLeave = () => { setCardVars({ '--rotate-x': '0deg', '--rotate-y': '0deg', '--rotator-transition': '600ms', });};", children: _jsx(_components.div, {}) }) })] }) }), "\n", _jsx(PokemonCard, { stage: "interactive" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "3-加上眩光效果", children: "3. 加上眩光效果" }), "\n", _jsx(_components.p, { children: "最後，來為卡片加上閃亮的眩光效果吧！" }), "\n", _jsxs(_components.p, { children: ["先在 ", _jsx(_components.code, { children: ".rotator" }), " 裡面加上一個 ", _jsx(_components.code, { children: ".glare" }), " 元素："] }), "\n", _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.jsx" }) }), _jsx(_components.pre, { "data-language": "jsx", className: "wrap", style: { "--ecMaxLine": "27ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "div" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66", "--0fs": "italic" }, children: "className" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'rotator'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ">" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "img" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66", "--0fs": "italic" }, children: "src" }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'圖片網址'" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " />" })] }) }), _jsx(_components.div, { className: "ec-line highlight ins tm-label", style: { "--tmLabel": "'+'", "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsxs(_components.span, { style: { "--0": "#b0b6c3" }, children: [_jsx(_components.span, { className: "indent", children: " " }), "<"] }), _jsx(_components.span, { style: { "--0": "#eca3a8" }, children: "div" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: " " }), _jsx(_components.span, { style: { "--0": "#daae84", "--0fs": "italic" }, children: "className" }), _jsx(_components.span, { style: { "--0": "#72c2cc" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'glare'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: " />" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "" })] }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": "

", children: _jsx(_components.div, {}) }) })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: ".glare" }), " 的樣式是利用 ", _jsx(_components.code, { children: "radial-gradient" }), " 做出來的："] }), "\n", _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.module.css" }) }), _jsx(_components.pre, { "data-language": "css", className: "wrap", style: { "--ecMaxLine": "74ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#D19A66" }, children: ".glare" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "position: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "absolute" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "inset: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "mix-blend-mode: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "overlay" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "/* 眩光本體 */" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "background-image: " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "radial-gradient" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "farthest-corner" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "circle" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " at " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "var" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "--pointer-x" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "50" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "var" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "--pointer-y" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "50" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ")," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "hsla" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "100" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0.8" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "10" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "hsla" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "100" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0.65" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "20" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "hsla" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0.5" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "90" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "%" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "opacity: " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "var" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "--glare-opacity" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ");" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "transition: opacity " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "var" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "--glare-transition" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "300" }), _jsx(_components.span, { style: { "--0": "#E6888F" }, children: "ms" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "ease-out" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ";" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "pointer-events: " }), _jsx(_components.span, { style: { "--0": "#D19A66" }, children: "none" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "; " }), _jsx(_components.span, { style: { "--0": "#9FA3AA", "--0fs": "italic" }, children: "/* 讓滑鼠可以穿透這層 */" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "}" }) }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": ".glare { position: absolute; inset: 0; mix-blend-mode: overlay; /* 眩光本體 */ background-image: radial-gradient( farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%), hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.65) 20%, hsla(0, 0%, 0%, 0.5) 90% ); opacity: var(--glare-opacity, 0); transition: opacity var(--glare-transition, 300ms) ease-out; pointer-events: none; /* 讓滑鼠可以穿透這層 */}", children: _jsx(_components.div, {}) }) })] }) }), "\n", _jsxs(_components.p, { children: ["記得一樣要在 setCardVars 裡面設定 ", _jsx(_components.code, { children: "--glare-opacity" }), " 跟 ", _jsx(_components.code, { children: "--glare-transition" }), "，這樣當滑鼠移進卡片時，眩光才會出現："] }), "\n", _jsx(_components.div, { className: "expressive-code", children: _jsxs(_components.figure, { className: "frame has-title", children: [_jsx(_components.figcaption, { className: "header", children: _jsx(_components.span, { className: "title", children: "PokemonCard.jsx" }) }), _jsx(_components.pre, { "data-language": "jsx", className: "wrap", style: { "--ecMaxLine": "34ch" }, children: _jsxs(_components.code, { children: [_jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "onMouseMove" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " (" }), _jsx(_components.span, { style: { "--0": "#E6888F", "--0fs": "italic" }, children: "e" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "=>" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "..." })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "setCardVars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "({" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "..." })] }) }), _jsx(_components.div, { className: "ec-line highlight ins tm-label", style: { "--tmLabel": "'+'", "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--glare-opacity'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'1'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line highlight ins", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--glare-transition'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'180ms'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "});" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "};" }) }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: "\n" }) }), _jsx(_components.div, { className: "ec-line", children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "const" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "onMouseLeave" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }), _jsx(_components.span, { style: { "--0": "#56B6C2" }, children: "=" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " () " }), _jsx(_components.span, { style: { "--0": "#CD89E1" }, children: "=>" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " {" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#61AFEF" }, children: "setCardVars" }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "({" })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "..." })] }) }), _jsx(_components.div, { className: "ec-line highlight ins tm-label", style: { "--tmLabel": "'+'", "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--glare-opacity'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'0'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line highlight ins", style: { "--ecIndent": "4ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: " " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'--glare-transition'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: ": " }), _jsx(_components.span, { style: { "--0": "#98C379" }, children: "'600ms'" }), _jsx(_components.span, { style: { "--0": "#b0b6c3" }, children: "," })] }) }), _jsx(_components.div, { className: "ec-line", style: { "--ecIndent": "2ch" }, children: _jsxs(_components.div, { className: "code", children: [_jsx(_components.span, { className: "indent", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: " " }) }), _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "});" })] }) }), _jsx(_components.div, { className: "ec-line", children: _jsx(_components.div, { className: "code", children: _jsx(_components.span, { style: { "--0": "#ABB2BF" }, children: "};" }) }) })] }) }), _jsx(_components.div, { className: "copy", children: _jsx(_components.button, { title: "Copy to clipboard", "data-copied": "Copied!", "data-code": "const onMouseMove = (e) => { ... setCardVars({ ... '--glare-opacity': '1', '--glare-transition': '180ms', });};const onMouseLeave = () => { setCardVars({ ... '--glare-opacity': '0', '--glare-transition': '600ms', });};", children: _jsx(_components.div, {}) }) })] }) }), "\n", _jsx(PokemonCard, { stage: "final" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "完整程式碼", children: "完整程式碼" }), "\n", _jsx("iframe", { height: 400, style: { width: '100%' }, scrolling: "no", title: "Pokémon Card CSS Common Effect", src: "https://codepen.io/kir4che/embed/bNVjNKd?default-tab=html%2Cresult", frameBorder: "0", loading: "lazy", allowTransparency: true, allowFullScreen: true }), "\n", _jsx(_components.p, { children: "這篇會再持續學習並更新其他閃卡特效～" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }