docs__myblog__css__cssmatrix.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[38],{HM3A:function(e,a,n){"use strict";n.r(a);var t=n("q1tI"),l=n.n(t),r=n("dEAq"),c=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"\u77e9\u9635\u7684\u6982\u5ff5"},l.a.createElement(r["AnchorLink"],{to:"#\u77e9\u9635\u7684\u6982\u5ff5","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u77e9\u9635\u7684\u6982\u5ff5"),l.a.createElement("p",null,"\u5728\u6570\u5b66\u4e2d\uff0c\u77e9\u9635(Matrix)\u662f\u4e00\u4e2a \u6309\u7167\u2ed3\u65b9\u9635\u5217\u6392\u5217\u7684\u590d\u6570\u6216\u5b9e\u6570\u96c6\u5408\uff0c \u6700\u65e9\u6765\u81ea\u4e8e\u65b9\u7a0b\u7ec4\u7684\u7cfb\u6570\u53ca\u5e38\u6570\u6240\u6784\u6210 \u7684\u65b9\u9635\u3002"),l.a.createElement("p",null,"\u77e9\u9635\u662f\u9ad8\u7b49\u4ee3\u6570\u5b66\u4e2d\u7684\u5e38\u2ec5\u5de5\u5177\uff0c \u4e5f\u5e38\u2ec5\u4e8e\u7edf\u8ba1\u5206\u6790\u7b49\u5e94\u7528\u6570\u5b66\u5b66\u79d1\u4e2d\u3002 \u5728\u7269\u7406\u5b66\u4e2d\uff0c\u77e9\u9635\u4e8e\u7535\u8def\u5b66\u3001\u529b\u5b66\u3001\u5149 \u5b66\u548c\u91cf\u5b50\u7269\u7406\u4e2d\u90fd\u6709\u5e94\u7528;\u8ba1\u7b97\u673a\u79d1\u5b66 \u4e2d\uff0c\u4e09\u7ef4\u52a8\u753b\u5236\u4f5c\u4e5f\u9700\u8981\u7528\u5230\u77e9\u9635\u3002 \u77e9\u9635\u7684\u8fd0\u7b97\u662f\u6570\u503c\u5206\u6790\u9886\u57df\u7684\u91cd\u8981\u95ee \u9898\u3002\u7531 m \xd7 n \u4e2a\u6570 aij \u6392\u6210\u7684 m \u884c n \u5217\u7684 \u6570\u8868\u79f0\u4e3a m \u884c n \u5217\u7684\u77e9\u9635\uff0c\u7b80\u79f0 m \xd7 n \u77e9 \u9635\u3002\u8fd9 m\xd7n \u4e2a\u6570\u79f0\u4e3a\u77e9\u9635 A \u7684\u5143\u7d20\uff0c\u7b80 \u79f0\u4e3a\u5143"),l.a.createElement("h2",{id:"\u8ba1\u7b97\u89c4\u5219"},l.a.createElement(r["AnchorLink"],{to:"#\u8ba1\u7b97\u89c4\u5219","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u8ba1\u7b97\u89c4\u5219"),l.a.createElement("p",null,"\u77e9\u9635\u7b2c m \u884c\u4e0e\u7b2c n \u5217\u4ea4\u53c9\u4f4d\u7f6e\u7684\u90a3\u4e2a\u503c\uff0c\u7b49\u4e8e\u7b2c\u4e00\u4e2a\u77e9\u9635\u7b2c m \u884c\u4e0e\u7b2c\u4e8c\u4e2a\u77e9\u9635\u7b2c n \u5217\uff0c\u5bf9\u5e94\u4f4d\u7f6e\u7684\u6bcf\u4e2a\u503c\u7684\u4e58\u79ef\u4e4b\u548c\u3002\u3002\u7ebf\u6027\u4ee3\u6570\u662f\u5411\u91cf\u8ba1\u7b97\u7684\u57fa\u7840\uff0c\u5f88\u591a\u91cd\u8981\u7684\u6570\u5b66 \u6a21\u578b\u90fd\u8981\u7528\u5230\u5411\u91cf\u8ba1\u7b97\u3002\u77e9\u9635\u7684\u672c\u8d28\u5c31\u662f\u7ebf\u6027\u65b9\u7a0b\u5f0f\uff0c\u4e24\u8005\u662f\u4e00\u4e00\u5bf9\u5e94\u5173\u7cfb\u3002\u5982\u679c\u4ece \u7ebf\u6027\u65b9\u7a0b\u5f0f\u7684\u2ec6\u5ea6\uff0c\u7406\u89e3\u77e9\u9635\u4e58\u6cd5\u5c31\u6beb\u65e0\u96be\u5ea6\u3002"),l.a.createElement("h2",{id:"css-\u4e2d\u77e9\u9635\u5e94\u7528"},l.a.createElement(r["AnchorLink"],{to:"#css-\u4e2d\u77e9\u9635\u5e94\u7528","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"CSS \u4e2d\u77e9\u9635\u5e94\u7528"),l.a.createElement("ul",null,l.a.createElement("li",null,"matrix() \u662f\u5143\u7d20 2D \u5e73\u9762\u7684\u79fb\u52a8\u53d8\u6362(transform)\uff0c2D \u53d8\u6362\u77e9\u9635\u4e3a 3*3"),l.a.createElement("li",null,"matrix3d() \u662f 3D \u53d8\u6362\uff0c3D \u53d8\u6362\u5219\u662f 4*4 \u7684\u77e9\u9635\u3002")),l.a.createElement("h2",{id:"transform-\u539f\u7406"},l.a.createElement(r["AnchorLink"],{to:"#transform-\u539f\u7406","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"transform \u539f\u7406"),l.a.createElement("ul",null,l.a.createElement("li",null,"skew \u659c\u62c9"),l.a.createElement("li",null,"scale \u7f29\u653e"),l.a.createElement("li",null,"rotate \u65cb\u8f6c"),l.a.createElement("li",null,"translate \u4f4d\u79fb")),l.a.createElement("img",{src:n("yGEI")}),l.a.createElement("p",null,"transform: ",l.a.createElement("code",null,"matrix(a,b,c,d,e,f);"),"\u65e0\u8bba\u662f\u65cb\u8f6c\u8fd8\u662f\u62c9\u4f38\u4ec0\u4e48\u7684\uff0c\u672c\u8d28\u4e0a\u90fd\u662f\u5e94\u7528\u7684 matrix()\u65b9\u6cd5\u5b9e\u73b0\u7684(\u4fee\u6539 matrix()\u65b9\u6cd5\u56fa\u5b9a\u51e0\u4e2a\u503c)\uff0c\u53ea\u662f\u7c7b\u4f3c\u4e8e transform:rotate \u8fd9\u79cd\u8868\u73b0\u5f62\u5f0f\uff0c\u6211\u4eec\u66f4\u5bb9\u6613\u7406\u89e3\uff0c\u8bb0\u5fc6\u4e0e\u4e0a\u624b\u3002"),l.a.createElement("p",null,"transform-origin \u901a\u8fc7",l.a.createElement("code",null,"transform-origin"),"\u5c5e\u6027\u8fdb\u884c\u8bbe\u7f6e\u7684\u65f6 \u5019\uff0c\u77e9\u9635\u76f8\u5173\u8ba1\u7b97\u4e5f\u968f\u4e4b\u53d1\u751f\u6539\u53d8\u3002\u5b9e \u9645\u56fe\u5f62\u6548\u679c\u4e0a\u5c31\u662f\uff0c\u65cb\u8f6c\u62c9\u4f38\u7684\u4e2d\u5fc3\u70b9 \u53d8\u4e86!"),l.a.createElement("p",null,l.a.createElement(r["Link"],{to:"http://ds-overdesign.com/transform/matrix3d.html"},"matrix3d")),l.a.createElement("h2",{id:"\u77e9\u9635\u5e94\u7528\u573a\u666f"},l.a.createElement(r["AnchorLink"],{to:"#\u77e9\u9635\u5e94\u7528\u573a\u666f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u77e9\u9635\u5e94\u7528\u573a\u666f\uff1f"),l.a.createElement("ul",null,l.a.createElement("li",null,"SVG ",l.a.createElement("code",null,'transform="matrix(a b c d e f)"')),l.a.createElement("li",null,"Canvas ",l.a.createElement("code",null,"context.transform(2,0,0,2,150,150)")),l.a.createElement("li",null,"WebGL \u77e9\u9635\u5728 3D \u6e32\u67d3\u4e2d\u4e0d\u53ef\u7f3a\u5c11\uff0c\u5750\u6807\u53d8\u6362\u6709\u6a21\u578b\u53d8\u6362\uff0c\u89c6\u56fe\u53d8\u6362\uff0c\u6295\u5f71\u53d8 \u6362\u7b49\u591a\u79cd"),l.a.createElement("li",null,"CSS 3D ",l.a.createElement("code",null,"matrix3d")))))}));a["default"]=e=>{var a=l.a.useContext(r["context"]),n=a.demos;return l.a.useEffect((()=>{var a;null!==e&&void 0!==e&&null!==(a=e.location)&&void 0!==a&&a.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(c,{demos:n})}},yGEI:function(e,a,n){e.exports=n.p+"static/transform.db2e1827.png"}}]);