From bc5c266518fb8d4a4eb24905e0550d3ebd48c82d Mon Sep 17 00:00:00 2001
From: RainSun <zhaoyingbo@live.cn>
Date: Wed, 23 Oct 2019 18:04:56 +0800
Subject: [PATCH] update

---
 20191019/buttonSlider.html       |   1 +
 20191020/20191020.md             |   1 -
 Miscellaneous/transformMatrix.md | 135 +++++++++++++++++++++++++++++++
 README.md                        |   3 +
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 Miscellaneous/transformMatrix.md

diff --git a/20191019/buttonSlider.html b/20191019/buttonSlider.html
index 2883bca..2a9c007 100644
--- a/20191019/buttonSlider.html
+++ b/20191019/buttonSlider.html
@@ -37,6 +37,7 @@
     }
 
     .slider .btns {
+      color: #000;
       /* position: absolute;
       left: 10px;
       right: 10px;
diff --git a/20191020/20191020.md b/20191020/20191020.md
index 83ad47a..a8e0d18 100644
--- a/20191020/20191020.md
+++ b/20191020/20191020.md
@@ -9,4 +9,3 @@
   * 将重复的代码封装成函数
   * 鼠标移入自动停止
   * 鼠标移出自动开始
-  
\ No newline at end of file
diff --git a/Miscellaneous/transformMatrix.md b/Miscellaneous/transformMatrix.md
new file mode 100644
index 0000000..66a5b43
--- /dev/null
+++ b/Miscellaneous/transformMatrix.md
@@ -0,0 +1,135 @@
+# CSS的transforn详解
+
+## 使用正常的方法
+```css
+.demo{
+  transform:translate(10px, 20px) rotate(30deg) scale(1.5, 2); 
+}
+```
+
+## matrix
+```css
+.demo{
+  transform:matrix(0.75, 0.8, -0.8, 1.2, 10, 20)
+}
+```
+
+## matrix 与矩阵对应
+```css
+.demo{
+  transform:matrix(a,b,c,d,e,f)
+}
+```
+![矩阵](https://upload-images.jianshu.io/upload_images/10991556-81fa02fdd6ce61ff.png?imageMogr2/auto-orient/strip|imageView2/2/w/997)
+
+* 2D的转换是由一个3*3的矩阵表示的，前两行代表转换的值，分别是 a b c d e f ，要注意是竖着排的，第一行代表的是X轴变化，第二行代表的是Y轴的变化，第三行代表的是Z轴的变化，2D不涉及到Z轴，这里使用 0 0 1
+
+## 缩放scale(x,y)
+
+* 缩放对应的是矩阵中的a和d，x轴的缩放比例对应a,y轴的缩放比例对应d。
+
+```css
+transform:scale(x,y)
+a = x
+d = y
+```
+
+* 所以scale(1.5, 2)对应的矩阵是
+  * `matrix:(1.5,0,0,0,2,0)`
+
+![缩放矩阵](https://upload-images.jianshu.io/upload_images/10991556-8ee2ef06470e98a1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1080)
+
+* 默认的话a=d=1 记住缩放是对角线
+
+## 平移 translate(10, 20)
+
+* 平移对应的是矩阵中 e 和 f，平移的x 和 f分别对应 e 和 f
+
+```css 
+transform:translate(10, 20)
+e = 10
+f = 20 
+```
+
+* 对应：`transform: matrix(a, b, c, d ,10, 20);`
+
+* 结合缩放：`transform: matrix(1.5 0, 0, 2, 10, 20)`
+
+* 这里的ef就是矩阵的最右边的值
+
+## 旋转 rotate(0deg)
+
+* 旋转影响的是a/b/c/d四个值，分别是什么呢？
+```css 
+transform: rotate(θdeg)
+
+a=cosθ
+
+b=sinθ
+
+c=-sinθ
+
+d=cosθ
+```
+
+* 如果要计算 30° 的sin值：
+
+* 首先我们要将 30° 转换为弧度，传递给三角函数计算。用 JS 计算就是下面的样子了。
+
+```js
+// 弧度和角度的转换公式：弧度=π/180×角度 
+const radian = Math.PI / 180 * 30 // 算出弧度
+const sin = Math.sin(radian) // 计算 sinθ
+const cos = Math.cos(radian) // 计算 cosθ
+console.log(sin, cos) // 输出 ≈ 0.5, 0.866
+```
+
+```css
+transform: rotate(30deg)
+
+a=0.866
+
+b=0.5
+
+c=-0.5
+
+d=0.866
+
+transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
+```
+
+## 偏移 skew(20deg, 30deg)
+
+* 上面的题目中没有出现出现偏移值，偏移值也是由两个参数组成，x 轴和 y 轴，分别对应矩阵中的 c 和 b。是 x 对应 c，y 对应 b， 这个对应并不是相等，需要对 skew 的 x 值 和 y 值进行 tan 运算。
+
+```css
+transform: skew(20deg, 30deg);
+
+b=tan30°
+
+c=tan20°
+
+注意 y 对应的是 c，x 对应的是 b。
+transform: matrix(a, tan(30deg), tan(20deg), d, e, f)
+```
+
+* 使用 JS 来算出 tan20 和 tan30
+
+```js
+// 先创建一个方法，直接返回角度的tan值
+function tan (deg) {
+    const radian = Math.PI / 180 * deg
+    return Math.tan(radian)
+}
+const b = tan(30)
+const c = tan(20)
+console.log(b, c) // 输出 ≈ 0.577, 0.364
+
+b=0.577 c=0.364
+transform: matrix(1, 0.577, 0.364, 1, 0, 0)
+```
+
+## 旋转+缩放+偏移+位移
+
+* 如果我们既要旋转又要缩放又要偏移，我们需要将旋转和缩放和偏移和位移多个矩阵相乘，要按照transform里面rotate/scale/skew/translate所写的顺序相乘。
+这里我们先考虑旋转和缩放，需要将旋转的矩阵和缩放的矩阵相乘
\ No newline at end of file
diff --git a/README.md b/README.md
index 3dc31c3..02ab200 100644
--- a/README.md
+++ b/README.md
@@ -114,4 +114,7 @@
 [linkToMd](./20191020/20191020.md)
 
 * 自动轮播图案例
+
+* [上课视频链接](https://pan.baidu.com/s/16mkeyFPbZJ7m-i8dAR8VtA&shfl=sharepset) 
+提取码：1ixx
 ---
\ No newline at end of file