<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width">
|
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/ios-icon.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="/32.ico">
|
<link rel="icon" type="image/png" sizes="16x16" href="/16.ico">
|
|
<link rel="stylesheet" href="/css/main.css">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
|
|
<script class="next-config" data-name="main" type="application/json">{"hostname":"zxq.im","root":"/","images":"/images","scheme":"Pisces","darkmode":false,"version":"8.18.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>
|
|
<meta name="description" content="matrix()？矩阵？喵喵喵？国家教育我到底有什么目的？那么，在把中学数学忘得一干二净的情况下，要怎么理解matrix()的用法？本文略长，需要结果的请点击文章左侧的导航直达“总结”处。 大胆实验我们可以看到matrix()一共有六个参数，我会直接修改参数，然后看运行结果，用这种做实验的方式来强行理解每个参数的作用。本文用带圈的数字作为代数：matrix(①,②,③,④,⑤,⑥)，根据侧边栏上的">
|
<meta property="og:type" content="article">
|
<meta property="og:title" content="用猴子思维理解matrix()">
|
<meta property="og:url" content="http://zxq.im/e5f96f7d.html">
|
<meta property="og:site_name" content="ZXQ">
|
<meta property="og:description" content="matrix()？矩阵？喵喵喵？国家教育我到底有什么目的？那么，在把中学数学忘得一干二净的情况下，要怎么理解matrix()的用法？本文略长，需要结果的请点击文章左侧的导航直达“总结”处。 大胆实验我们可以看到matrix()一共有六个参数，我会直接修改参数，然后看运行结果，用这种做实验的方式来强行理解每个参数的作用。本文用带圈的数字作为代数：matrix(①,②,③,④,⑤,⑥)，根据侧边栏上的">
|
<meta property="og:locale" content="en_US">
|
<meta property="og:image" content="http://zxq.im/assets/img/00088.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00089.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00090.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00091.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00092.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00093.jpg">
|
<meta property="og:image" content="http://zxq.im/assets/img/00094.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00095.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00096.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00097.png">
|
<meta property="og:image" content="http://zxq.im/assets/img/00098.jpg">
|
<meta property="article:published_time" content="2019-05-09T16:00:00.000Z">
|
<meta property="article:modified_time" content="2024-07-30T14:49:56.570Z">
|
<meta property="article:author" content="ZXQ">
|
<meta property="article:tag" content="typing">
|
<meta property="article:tag" content="CSS">
|
<meta name="twitter:card" content="summary">
|
<meta name="twitter:image" content="http://zxq.im/assets/img/00088.png">
|
|
|
<link rel="canonical" href="http://zxq.im/e5f96f7d.html">
|
|
|
|
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://zxq.im/e5f96f7d.html","path":"e5f96f7d.html","title":"用猴子思维理解matrix()"}</script>
|
|
<script class="next-config" data-name="calendar" type="application/json">""</script>
|
<title>用猴子思维理解matrix() | ZXQ</title>
|
|
|
|
|
|
|
|
|
|
<noscript>
|
<link rel="stylesheet" href="/css/noscript.css">
|
</noscript>
|
</head>
|
|
<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
|
<div class="headband"></div>
|
|
<main class="main">
|
<div class="column">
|
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
|
<div class="site-nav-toggle">
|
<div class="toggle" aria-label="Toggle navigation bar" role="button">
|
<span class="toggle-line"></span>
|
<span class="toggle-line"></span>
|
<span class="toggle-line"></span>
|
</div>
|
</div>
|
|
<div class="site-meta">
|
|
<a href="/" class="brand" rel="start">
|
<i class="logo-line"></i>
|
<p class="site-title">ZXQ</p>
|
<i class="logo-line"></i>
|
</a>
|
<p class="site-subtitle" itemprop="description">just a typist</p>
|
</div>
|
|
<div class="site-nav-right">
|
<div class="toggle popup-trigger" aria-label="Search" role="button">
|
<i class="fa fa-search fa-fw fa-lg"></i>
|
</div>
|
</div>
|
</div>
|
|
|
|
<nav class="site-nav">
|
<ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-heart fa-fw"></i>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
|
<li class="menu-item menu-item-search">
|
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>Search
|
</a>
|
</li>
|
</ul>
|
</nav>
|
|
|
|
<div class="search-pop-overlay">
|
<div class="popup search-popup"><div class="search-header">
|
<span class="search-icon">
|
<i class="fa fa-search"></i>
|
</span>
|
<div class="search-input-container">
|
<input autocomplete="off" autocapitalize="off" maxlength="80"
|
placeholder="Searching..." spellcheck="false"
|
type="search" class="search-input">
|
</div>
|
<span class="popup-btn-close" role="button">
|
<i class="fa fa-times-circle"></i>
|
</span>
|
</div>
|
<div class="search-result-container no-result">
|
<div class="search-result-icon">
|
<i class="fa fa-spinner fa-pulse fa-5x"></i>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
</header>
|
|
|
<aside class="sidebar">
|
|
<div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
|
<ul class="sidebar-nav">
|
<li class="sidebar-nav-toc">
|
Table of Contents
|
</li>
|
<li class="sidebar-nav-overview">
|
Overview
|
</li>
|
</ul>
|
|
<div class="sidebar-panel-container">
|
<!--noindex-->
|
<div class="post-toc-wrap sidebar-panel">
|
<div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%A7%E8%83%86%E5%AE%9E%E9%AA%8C"><span class="nav-number">1.</span> <span class="nav-text">大胆实验</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C1%EF%BC%9A%E4%BD%8D%E7%A7%BB%E5%8F%82%E6%95%B0%EF%BC%88%E6%9C%80%E5%90%8E%E4%B8%A4%E5%8F%82%E6%95%B0%EF%BC%89"><span class="nav-number">1.1.</span> <span class="nav-text">实验1：位移参数（最后两参数）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E2%91%A4-%E2%91%A5%E5%8F%82%E6%95%B0"><span class="nav-number">1.1.1.</span> <span class="nav-text">⑤&⑥参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C1%E5%B0%8F%E7%BB%93"><span class="nav-number">1.1.2.</span> <span class="nav-text">实验1小结</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C2%EF%BC%9A%E7%BC%A9%E6%94%BE%E5%8F%82%E6%95%B0%EF%BC%88%E7%AC%AC%E4%B8%80%E5%9B%9B%E5%8F%82%E6%95%B0%EF%BC%89"><span class="nav-number">1.2.</span> <span class="nav-text">实验2：缩放参数（第一四参数）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E2%91%A0%E5%8F%82%E6%95%B0"><span class="nav-number">1.2.1.</span> <span class="nav-text">①参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E2%91%A3%E5%8F%82%E6%95%B0"><span class="nav-number">1.2.2.</span> <span class="nav-text">④参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E2%91%A0-%E2%91%A3%E5%8F%82%E6%95%B0"><span class="nav-number">1.2.3.</span> <span class="nav-text">①&④参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C2%E5%B0%8F%E7%BB%93"><span class="nav-number">1.2.4.</span> <span class="nav-text">实验2小结</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C3%EF%BC%9A%E5%80%BE%E6%96%9C%E5%8F%82%E6%95%B0%EF%BC%88%E7%AC%AC%E4%BA%8C%E4%B8%89%E5%8F%82%E6%95%B0%EF%BC%89"><span class="nav-number">1.3.</span> <span class="nav-text">实验3：倾斜参数（第二三参数）</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E2%91%A1%E5%8F%82%E6%95%B0"><span class="nav-number">1.3.1.</span> <span class="nav-text">②参数</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%BF%80%E6%83%85%E5%AE%9E%E8%B7%B5"><span class="nav-number">1.4.</span> <span class="nav-text">激情实践</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C%E6%80%BB%E7%BB%93"><span class="nav-number">1.5.</span> <span class="nav-text">实验总结</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%91%E6%95%A3%E6%80%9D%E7%BB%B4"><span class="nav-number">2.</span> <span class="nav-text">发散思维</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#matrix-%E5%AD%98%E5%9C%A8%E7%9A%84%E6%84%8F%E4%B9%89%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">2.1.</span> <span class="nav-text">matrix()存在的意义是什么？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%98%E5%BD%A2%E5%87%BD%E6%95%B0%E6%B7%B7%E5%86%99%E7%AD%89%E4%BA%8Ematrix-%E4%B9%88%EF%BC%9F"><span class="nav-number">2.2.</span> <span class="nav-text">变形函数混写等于matrix()么？</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%88%BF%E8%B4%B7%E6%88%BF"><span class="nav-number">2.2.1.</span> <span class="nav-text">房贷房</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3%E4%B8%89%E7%BB%B4%E7%9F%A9%E9%98%B5%E5%87%BD%E6%95%B0matrix3d-%EF%BC%9F"><span class="nav-number">2.3.</span> <span class="nav-text">怎么理解三维矩阵函数matrix3d()？</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%88%91%E7%9A%84%E6%83%B3%E6%B3%95"><span class="nav-number">3.</span> <span class="nav-text">我的想法</span></a></li></ol></div>
|
</div>
|
<!--/noindex-->
|
|
<div class="site-overview-wrap sidebar-panel">
|
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
|
<img class="site-author-image" itemprop="image" alt="ZXQ"
|
src="/avatar.png">
|
<p class="site-author-name" itemprop="name">ZXQ</p>
|
<div class="site-description" itemprop="description"></div>
|
</div>
|
<div class="site-state-wrap animated">
|
<nav class="site-state">
|
<div class="site-state-item site-state-posts">
|
<a href="/archives/">
|
<span class="site-state-item-count">61</span>
|
<span class="site-state-item-name">posts</span>
|
</a>
|
</div>
|
<div class="site-state-item site-state-categories">
|
<a href="/categories/">
|
<span class="site-state-item-count">3</span>
|
<span class="site-state-item-name">categories</span></a>
|
</div>
|
<div class="site-state-item site-state-tags">
|
<a href="/tags/">
|
<span class="site-state-item-count">13</span>
|
<span class="site-state-item-name">tags</span></a>
|
</div>
|
</nav>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
|
</aside>
|
|
|
</div>
|
|
<div class="main-inner post posts-expand">
|
|
|
|
|
|
<div class="post-block">
|
|
|
|
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
|
<link itemprop="mainEntityOfPage" href="http://zxq.im/e5f96f7d.html">
|
|
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
<meta itemprop="image" content="/avatar.png">
|
<meta itemprop="name" content="ZXQ">
|
</span>
|
|
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
<meta itemprop="name" content="ZXQ">
|
<meta itemprop="description" content="">
|
</span>
|
|
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
<meta itemprop="name" content="用猴子思维理解matrix() | ZXQ">
|
<meta itemprop="description" content="">
|
</span>
|
<header class="post-header">
|
<h1 class="post-title" itemprop="name headline">
|
用猴子思维理解matrix()
|
</h1>
|
|
<div class="post-meta-container">
|
|
|
<div class="post-meta">
|
<span class="post-meta-item">
|
<span class="post-meta-item-icon">
|
<i class="far fa-calendar"></i>
|
</span>
|
<span class="post-meta-item-text">Posted on</span>
|
|
<time title="Created: 2019-05-10 00:00:00" itemprop="dateCreated datePublished" datetime="2019-05-10T00:00:00+08:00">2019-05-10</time>
|
</span>
|
<span class="post-meta-item">
|
<span class="post-meta-item-icon">
|
<i class="far fa-folder"></i>
|
</span>
|
<span class="post-meta-item-text">In</span>
|
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
<a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">前端技术</span></a>
|
</span>
|
</span>
|
|
|
</div>
|
|
|
</div>
|
</header>
|
|
|
|
|
|
|
<div class="post-body" itemprop="articleBody"><p>matrix()？矩阵？喵喵喵？国家教育我到底有什么目的？<br>那么，在把中学数学忘得一干二净的情况下，要怎么理解matrix()的用法？<br>本文略长，需要结果的请点击文章左侧的导航直达“总结”处。</p>
|
<h3 id="大胆实验"><a href="#大胆实验" class="headerlink" title="大胆实验"></a>大胆实验</h3><p>我们可以看到matrix()一共有六个参数，我会直接修改参数，然后看运行结果，用这种做实验的方式来强行理解每个参数的作用。本文用带圈的数字作为代数：matrix(①,②,③,④,⑤,⑥)，根据侧边栏上的索引也可以找到具体参数的实验。</p>
|
<h4 id="实验1：位移参数（最后两参数）"><a href="#实验1：位移参数（最后两参数）" class="headerlink" title="实验1：位移参数（最后两参数）"></a>实验1：位移参数（最后两参数）</h4><h5 id="⑤-⑥参数"><a href="#⑤-⑥参数" class="headerlink" title="⑤&⑥参数"></a>⑤&⑥参数</h5><p>矩阵的默认值是transform:matrix(1,0,0,1,0,0)，红盒六个参数都用默认值。<br><strong>操作：</strong>尝试修改后面两个参数。<br>** 观察：**后面两个参数是位移参数，单位是像素，以元素起始点为原点进行位移（元素起始点就是元素左上角）。<br><img src="/assets/img/00088.png"></p>
|
<h5 id="实验1小结"><a href="#实验1小结" class="headerlink" title="实验1小结"></a>实验1小结</h5><p>⑤参数=水平位移像素值，数值由左至右递增，以元素起始点为原点。<br>⑥参数=垂直位移像素值，数值由上至下递增，以元素起始点为原点。<br>实现位移，效果同**translate()**函数。</p>
|
<h4 id="实验2：缩放参数（第一四参数）"><a href="#实验2：缩放参数（第一四参数）" class="headerlink" title="实验2：缩放参数（第一四参数）"></a>实验2：缩放参数（第一四参数）</h4><p>为了方便观察，我先把四个块挪到不同象限以便观察，接下来的几个实验都是这样摆放四个盒子，所以后两位参数不用研究它，不是我要表达的重点。除了后两位的位移参数，红盒前四个参数保持默认值。</p>
|
<h5 id="①参数"><a href="#①参数" class="headerlink" title="①参数"></a>①参数</h5><p><strong>操作：</strong>这次尝试修改第一个参数。<br><strong>观察结果：</strong>肉眼可见除红盒之外的三个盒子的宽度发生了变化，变化之后的宽度是原来的宽度乘以这个参数得来的；而当参数为负数时，整个元素进行了水平翻转，文字也变成了镜像；变化以元素中心点为原点。<br><img src="/assets/img/00089.png"></p>
|
<h5 id="④参数"><a href="#④参数" class="headerlink" title="④参数"></a>④参数</h5><p><strong>操作：</strong>这次尝试修改第四个参数<br><strong>观察结果：</strong>这次宽度保持不变，高度则有了变化 ，变化规则和宽度一样。<br><img src="/assets/img/00090.png"></p>
|
<h5 id="①-④参数"><a href="#①-④参数" class="headerlink" title="①&④参数"></a>①&④参数</h5><p><strong>操作：</strong>同时修改第一个和第四个参数，用一样的绝对值。<br><strong>观察结果：</strong>等比缩放。<br><img src="/assets/img/00091.png"></p>
|
<h5 id="实验2小结"><a href="#实验2小结" class="headerlink" title="实验2小结"></a>实验2小结</h5><p>①参数=宽度缩放倍数值，为负数时水平翻转，以元素垂直中心线为轴。<br>④参数=高度缩放倍数值，为负数时垂直翻转，以元素水平中心线为轴。<br>两个参数能实现缩放，相等时，实现等比缩放，效果同**scale()**函数。</p>
|
<h4 id="实验3：倾斜参数（第二三参数）"><a href="#实验3：倾斜参数（第二三参数）" class="headerlink" title="实验3：倾斜参数（第二三参数）"></a>实验3：倾斜参数（第二三参数）</h4><h5 id="②参数"><a href="#②参数" class="headerlink" title="②参数"></a>②参数</h5><p><strong>操作：</strong>这次尝试修改第二个参数<br><img src="/assets/img/00092.png"><br>改变第二个参数后，元素变成了平行四边形，平行边之间的距离保持不变，但是横边垂直方向发生了倾斜，并且可以无限边长（不知道是否能传达我的意思，总之，大家自行体会）。和前面三个实验不同的是，这次没办法用肉眼观察出倾斜幅度是按什么单位来的。此时，我掏出了量角器，在屏幕上比划了下。<br><img src="/assets/img/00093.jpg"><br>以水平线为零刻度线进行测量，得到结果：红盒≈0°；绿盒≈26.5°；黄盒≈45°；蓝盒≈-35°。这时，我把测量结果和第二个参数放在一起对比一下，使用肉眼尝试寻找一下逻辑关系。</p>
|
<table><tr><th>四个盒子</th><td>红盒</td><td>绿盒</td><td>黄盒</td><td>蓝盒</td></tr><tr><th>倾斜角度</th><td>0°</td><td>26.5°</td><td>45°</td><td>-35°</td></tr><tr><th>第二参数</th><td>0</td><td>0.5</td><td>1</td><td>-0.7</td></tr><tr><th>我的猜想</th><td>tan0°=0</td><td>喵喵喵？</td><td>tan45°=1</td><td>喵喵喵？</td></tr></table>
|
此时，我大胆假设第二参数是倾斜角度的正切值，然后，我多用几个角度的正切值小心求证一下：tan30°=√3/3≈0.577， tan60°=√3≈1.732， tan22.5°=√2-1≈0.414。
|
<img src="/assets/img/00094.png">
|
我再举个特殊的例子，假设我们把元素的横边的倾斜角度拉到90°，这可能吗？这不就是和tan90°一样，是不存在的呀。
|
所以，私以为，此番猜想没毛病。
|
**观察结果：**元素垂直方向顺时针发生倾斜，此参数控制倾斜幅度。
|
##### ③参数
|
**操作：**这次尝试修改第三个参数
|
**观察结果：**理解第二个参数之后，第三个参数就不用解释了。
|
<img src="/assets/img/00095.png">
|
##### ②&③参数
|
之前修改这两个参数，都是在另一个参数完全不动的情况下进行，但是如果两个参数同时改变呢？
|
**操作：**这次尝试同时修改第二和第三个参数
|
**观察结果：**当这两个参数互为相反数，即相加为零，可以实现整个元素的旋转。
|
<img src="/assets/img/00096.png">
|
但是这样的旋转不是我们要的结果，因为矩形改变了尺寸，那要怎么保持原始尺寸呢？俺不知道，先瞎JB旋转45°做个实例，肉眼观察一下。
|
<img src="/assets/img/00097.png">
|
再次十分愚蠢地掏出我的度量衡工具！
|
<img src="/assets/img/00098.jpg">
|
<table><tr><th>显示设备</th><td colspan="2">ipad mini显示器</td><td colspan="2">笔记本显示器</td><td colspan="2">24寸显示器</tr><tr><th>测量对象</th><td>长</td><td>宽</td><td>长</td><td>宽</td><td>长</td><td>宽</td></tr><tr><th>红色矩形</th><td>4.3cm</td><td>3.5cm</td><td>4cm</td><td>3cm</td><td>4.9cm</td><td>3.7cm</td></tr><tr><th>绿色矩形</th><td>6.1cm</td><td>4.95cm</td><td>5.7cm</td><td>4.2cm</td><td>6.9cm</td><td>5.2cm</td></tr><tr><th rowspan="2">我的联想</th><td>4.3/6.1≈0.705</td><td>3.5/4.95≈0.707</td><td>4/5.7≈0.701</td><td>3/4.2≈0.714</td><td>4.9/6.9≈0.710</td><td>3.7/5.2≈0.711</td></tr><tr><td colspan="6">(0.705+0.707+0.701+0.714+0.710+0.711)/6=0.708≈0.707=<b>cos45°</b></td></tr></table>
|
我这一通分析是不是稳如老狗
|
##### 实验3小结
|
②参数=水平边界顺时针倾斜角度正切值。
|
③参数=垂直边界逆时针倾斜角度正切值。
|
实现倾斜，效果同**skew()**函数。
|
假设水平和垂直边线同时倾斜X°（也就是两数互为相反数），同时缩放参数①和④都等于cosX°，效果同**rotate()**函数。
|
|
<h4 id="激情实践"><a href="#激情实践" class="headerlink" title="激情实践"></a>激情实践</h4><p>分析完六个参数，你是不是觉得我在扯淡，那么，来，试一下。<br>效果要求：坤坤从画面左下角位移到画面右上角，并缩小成一颗小星星，过程中进行多圈旋转，制造出动漫中被一拳K到外太空的效果。<br>实践步骤：<br>1、收集素材图片：坤坤、蓝天、小星星。<br>2、整理思路：首先，设置位移参数，算好右上角的像素位置；其次，缩放到0.01；再次，来个18圈吧。<br>3、渐变设置：设置transition属性好方便观察变化过程。</p>
|
<h4 id="实验总结"><a href="#实验总结" class="headerlink" title="实验总结"></a>实验总结</h4><p>实验做完，我们来总结一下：<br>matrix(1,0,0,1,0,0)，matrix(①,②,③,④,⑤,⑥)</p>
|
<table><tr><td>参数</td><td>初始值</td><td>变形起点</td><td>数据类型</td><td>参数</td></tr><tr><td>①</td><td>1</td><td>中心点</td><td>倍数</td><td>元素水平方向缩放的倍数</td></tr><tr><td>②</td><td>0</td><td>中心点</td><td>正切值</td><td>元素水平边界顺时针倾斜角度的正切值</td></tr><tr><td>③</td><td>0</td><td>中心点</td><td>正切值</td><td>元素垂直边界逆时针倾斜角度的正切值</td></tr><tr><td>④</td><td>1</td><td>中心点</td><td>倍数</td><td>元素垂直方向缩放的倍数</td></tr><tr><td>⑤</td><td>0</td><td>左上角</td><td>像素值</td><td>元素水平方向位移的像素值</td></tr><tr><td>⑥</td><td>0</td><td>左上角</td><td>像素值</td><td>元素垂直方向位移的像素值</td></tr></table>
|
|
<p>若要实现位移效果，matrix(1,0,0,1,x,y)；<br>若要实现缩放效果，matrix(x,0,0,y,0,0)；<br>若要实现倾斜效果，matrix(1,tanA,tanB,1,0,0)；<br>若要实现旋转效果，matrix(cosA,sinA,-sinA,cosA,0,0)；</p>
|
<h3 id="发散思维"><a href="#发散思维" class="headerlink" title="发散思维"></a>发散思维</h3><h4 id="matrix-存在的意义是什么？"><a href="#matrix-存在的意义是什么？" class="headerlink" title="matrix()存在的意义是什么？"></a>matrix()存在的意义是什么？</h4><p>我们已经有了translate()、scale()、skew()和rotate()这样的变形函数可以实现我们要的效果，为什么还要学习matrix()这么晦涩难懂的函数？<br>首先，for 记性差的朋友，记一个matrix单词，还是比记四个英语单词要简单的多；<br>其次，for 想显摆的朋友，会矩阵函数好像是显得牛掰一点点；<br>最后，for 喜欢抄近道的朋友，希望解决问题的时候，使用最短路径，越短越好，当然，前提是你需要经常用到这些功能。</p>
|
<h4 id="变形函数混写等于matrix-么？"><a href="#变形函数混写等于matrix-么？" class="headerlink" title="变形函数混写等于matrix()么？"></a>变形函数混写等于matrix()么？</h4><p>已知transform的函数们是可以写在一起的，那么混写的transform等同于matrix()么？好吧，我以为是一样的，实操了一下，呵呵。此处应该有一篇文章，<a href="/geek/matrix/">《变形函数混写不等于matrix()》</a>。</p>
|
<h5 id="房贷房"><a href="#房贷房" class="headerlink" title="房贷房"></a>房贷房</h5><h4 id="怎么理解三维矩阵函数matrix3d-？"><a href="#怎么理解三维矩阵函数matrix3d-？" class="headerlink" title="怎么理解三维矩阵函数matrix3d()？"></a>怎么理解三维矩阵函数matrix3d()？</h4><p>进阶版<a href="/geek/matrix3d/">《用猴子思维理解matrix3d()》</a>，了解一下。</p>
|
<h3 id="我的想法"><a href="#我的想法" class="headerlink" title="我的想法"></a>我的想法</h3><p>为了理解matrix()，我在网上找了两三篇文章进行参考，都是以矩阵乘法来解释matrix()，我是看不懂的，在这些算式面前，我就像一只刚从山里出来的猴子，瞅着好新鲜好高级哟。当我把他们的结论放进代码中运行，却无一正确，是的，一个都不对！这到底是哪里出了问题？有时间把那么复杂的算式算清楚，没时间建个html实操一下？程序员们对自己的智商是不是过于自信了点？“猴子思维”是我自嘲且自谦的说法，我喜欢简单粗暴地从结果反推过程的思维方式，我认为明确了解目的地，才能推理出最短路径。我们思考，是为了解决问题，是为了能够把复杂的东西进行简单的输出，而不只是为了显得比别人聪明点，不是么？</p>
|
|
</div>
|
|
|
|
|
|
|
|
<footer class="post-footer">
|
<div class="post-tags">
|
<a href="/tags/typing/" rel="tag"># typing</a>
|
<a href="/tags/CSS/" rel="tag"># CSS</a>
|
</div>
|
|
|
|
<div class="post-nav">
|
<div class="post-nav-item">
|
<a href="/14cbeb92.html" rel="prev" title="《棉花糖实验》笔记">
|
<i class="fa fa-angle-left"></i> 《棉花糖实验》笔记
|
</a>
|
</div>
|
<div class="post-nav-item">
|
<a href="/2ab4661b.html" rel="next" title="英语长征从老友记开始">
|
英语长征从老友记开始 <i class="fa fa-angle-right"></i>
|
</a>
|
</div>
|
</div>
|
</footer>
|
|
|
</article>
|
</div>
|
|
|
|
|
|
|
</div>
|
</main>
|
|
<footer class="footer">
|
<div class="footer-inner">
|
|
<div class="copyright">
|
©
|
<span itemprop="copyrightYear">2024</span>
|
<span class="with-love">
|
<i class="fa fa-heart"></i>
|
</span>
|
<span class="author" itemprop="copyrightHolder">ZXQ</span>
|
</div>
|
<div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener" target="_blank">NexT.Pisces</a>
|
</div>
|
|
</div>
|
</footer>
|
|
|
<div class="back-to-top" role="button" aria-label="Back to top">
|
<i class="fa fa-arrow-up fa-lg"></i>
|
<span>0%</span>
|
</div>
|
|
<noscript>
|
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
|
</noscript>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
|
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
|
<script src="/js/third-party/search/local-search.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
</html>
|
