From cf211c4ded044e2e44ffdc79007aedc2cc2f741b Mon Sep 17 00:00:00 2001 From: silas <369694143@qq.com> Date: Mon, 19 Sep 2016 16:25:17 +0800 Subject: [PATCH 1/4] init Transform Matrix.md --- markdown/Transform Matrix.md | 134 +++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 markdown/Transform Matrix.md diff --git a/markdown/Transform Matrix.md b/markdown/Transform Matrix.md new file mode 100644 index 0000000..b95846f --- /dev/null +++ b/markdown/Transform Matrix.md @@ -0,0 +1,134 @@ + +## CSS3 Transform Matrix + +---- + +## Matrix + +* 本意是母体，基础，孕育生命的地方 + +* 数学中，表示矩形阵列 + ![matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/1.png) + +---- + +## Transform Properties + +* translate + `translate(10px 10px)` +* scale + `scale(2, 2)` +* rotate + `rotate(30deg)` +* skew + `skew(60deg)` +* matrix + `matrix(1, 0, 0, 1, 10, 10)` + +---- + +## Transform Origin + +* length + `transform-origin: 50px 70px` +* percentage + `transform-origin: 10% 10%` +* direction + `transform-origin: top left` +* default + `transform-origin: 50% 50%` + ![transform origin](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/2.png) + +---- + +## Transform Style + +`transform-style: flat | preserve-3d` + +---- + +## Transform Matrix + +* transform: matrix(a, b, c, d, e, f) + ![transform matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/3.png) +* 转换公式 + ![transform formula](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/5.png) +* 计算公式 + `x为 transform-origin 第一个参数，y为 transform-origin 第二个参数` + `x’ = ax + cy + e，x'，为变换元素后的水平位置` + `y’ = bx + dy + f，y'，为变换元素后的垂直位置` + +---- + +## Translate => Matrix + +* transform: translate(10px, 10px) + `matrix(1, 0, 0, 1, 10, 10)` + +* 计算 + `x’ = 1*x + 0*y + 10 = x + 10` + `y’ = 0*x + 1*y + 10 = y + 10` + +* 只跟 e, f 的值有关 + +---- + +## Scale => Matrix + +* transform: scale(2, 2) + `matrix(sx, 0, 0, sy, 0, 0)` + +* 计算 + `x’ = s*x + 0*y + 0 = sx` + `y’ = 0*x + s*y + 0 = sy` + +* 只跟 a, d 的值有关，其实是把元素的宽、高增大 or 减少相应的倍数 + +---- + +## Rotate => Matrix + +* transform: rotate(30deg) + `matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)` + +* 计算 + `x’ = x*cosθ - y*sinθ + 0 = x*cosθ - y*sinθ` + `y’ = x*sinθ + y*cosθ + 0 = x*sinθ + y*cosθ` + +---- + +## Skew => Matrix + +* transform: skew(60deg) + `matrix(1, tan(θy), tan(θx), 1, 0, 0)` + *θy：相对y轴倾斜的角度，θx：相对x轴倾斜的角度* + +* 计算 + `x’ = x + y*tan(θx) + 0 = x + y*tan(θx)` + `y’ = x*tan(θy) + y + 0 = x*tan(θy) + y` + +---- + +## Extensions + +* 3D transform + `matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)` + ![](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/8.png) +* perspective + `perspective: 1000px;` + *定义3D元素距视图的距离，单位为px，其子元素获得透视效果* +* perspective-origin + *和 transform origin 类似* +* backface-visibility + `backfire-visibility: visible | hidden;` + *定义当元素不面向屏幕时是否可见* + +---- + +## Reference + +* [https://www.w3.org/TR/css-transforms-1](https://www.w3.org/TR/css-transforms-1) +* [https://dev.opera.com/articles/understanding-the-css-transforms-matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix) + + + From f382ca06c1c43f7ef5fef9928d73d55e17b7eac3 Mon Sep 17 00:00:00 2001 From: Silas Date: Mon, 19 Sep 2016 16:55:54 +0800 Subject: [PATCH 2/4] Update Transform Matrix.md --- markdown/Transform Matrix.md | 76 +++++++++++++++++------------------- 1 file changed, 36 insertions(+), 40 deletions(-) diff --git a/markdown/Transform Matrix.md b/markdown/Transform Matrix.md index b95846f..fe4fd67 100644 --- a/markdown/Transform Matrix.md +++ b/markdown/Transform Matrix.md @@ -8,36 +8,36 @@ * 本意是母体，基础，孕育生命的地方 * 数学中，表示矩形阵列 - ![matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/1.png) + ![matrix](http://odqtkmbuu.bkt.clouddn.com/1.png) ---- ## Transform Properties * translate - `translate(10px 10px)` + - `translate(10px 10px)` * scale - `scale(2, 2)` + - `scale(2, 2)` * rotate - `rotate(30deg)` + - `rotate(30deg)` * skew - `skew(60deg)` + - `skew(60deg)` * matrix - `matrix(1, 0, 0, 1, 10, 10)` + - `matrix(1, 0, 0, 1, 10, 10)` ---- ## Transform Origin * length - `transform-origin: 50px 70px` + - `transform-origin: 50px 70px` * percentage - `transform-origin: 10% 10%` + - `transform-origin: 10% 10%` * direction - `transform-origin: top left` + - `transform-origin: top left` * default - `transform-origin: 50% 50%` - ![transform origin](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/2.png) + - `transform-origin: 50% 50%` + ![transform origin](http://odqtkmbuu.bkt.clouddn.com/2.png) ---- @@ -50,24 +50,24 @@ ## Transform Matrix * transform: matrix(a, b, c, d, e, f) - ![transform matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/3.png) + ![transform matrix](http://odqtkmbuu.bkt.clouddn.com/3.png) * 转换公式 - ![transform formula](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/5.png) + ![transform formula](http://odqtkmbuu.bkt.clouddn.com/4.png) * 计算公式 - `x为 transform-origin 第一个参数，y为 transform-origin 第二个参数` - `x’ = ax + cy + e，x'，为变换元素后的水平位置` - `y’ = bx + dy + f，y'，为变换元素后的垂直位置` + - `x为 transform-origin 第一个参数，y为 transform-origin 第二个参数` + - `x’ = ax + cy + e，x'，为变换元素后的水平位置` + - `y’ = bx + dy + f，y'，为变换元素后的垂直位置` ---- ## Translate => Matrix * transform: translate(10px, 10px) - `matrix(1, 0, 0, 1, 10, 10)` + - `matrix(1, 0, 0, 1, 10, 10)` * 计算 - `x’ = 1*x + 0*y + 10 = x + 10` - `y’ = 0*x + 1*y + 10 = y + 10` + - `x’ = 1*x + 0*y + 10 = x + 10` + - `y’ = 0*x + 1*y + 10 = y + 10` * 只跟 e, f 的值有关 @@ -76,11 +76,11 @@ ## Scale => Matrix * transform: scale(2, 2) - `matrix(sx, 0, 0, sy, 0, 0)` + - `matrix(sx, 0, 0, sy, 0, 0)` * 计算 - `x’ = s*x + 0*y + 0 = sx` - `y’ = 0*x + s*y + 0 = sy` + - `x’ = s*x + 0*y + 0 = sx` + - `y’ = 0*x + s*y + 0 = sy` * 只跟 a, d 的值有关，其实是把元素的宽、高增大 or 减少相应的倍数 @@ -89,39 +89,38 @@ ## Rotate => Matrix * transform: rotate(30deg) - `matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)` - + - `matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)` * 计算 - `x’ = x*cosθ - y*sinθ + 0 = x*cosθ - y*sinθ` - `y’ = x*sinθ + y*cosθ + 0 = x*sinθ + y*cosθ` + - `x’ = x*cosθ - y*sinθ + 0 = x*cosθ - y*sinθ` + - `y’ = x*sinθ + y*cosθ + 0 = x*sinθ + y*cosθ` ---- ## Skew => Matrix * transform: skew(60deg) - `matrix(1, tan(θy), tan(θx), 1, 0, 0)` - *θy：相对y轴倾斜的角度，θx：相对x轴倾斜的角度* + - `matrix(1, tan(θy), tan(θx), 1, 0, 0)` + - *θy：相对y轴倾斜的角度，θx：相对x轴倾斜的角度* * 计算 - `x’ = x + y*tan(θx) + 0 = x + y*tan(θx)` - `y’ = x*tan(θy) + y + 0 = x*tan(θy) + y` + - `x’ = x + y*tan(θx) + 0 = x + y*tan(θx)` + - `y’ = x*tan(θy) + y + 0 = x*tan(θy) + y` ---- ## Extensions * 3D transform - `matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)` - ![](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/8.png) + - `matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)` + ![4x4 matrix](http://odqtkmbuu.bkt.clouddn.com/5.png) * perspective - `perspective: 1000px;` - *定义3D元素距视图的距离，单位为px，其子元素获得透视效果* + - `perspective: 1000px;` + - *定义3D元素距视图的距离，单位为px，其子元素获得透视效果* * perspective-origin - *和 transform origin 类似* + - *和 transform origin 类似* * backface-visibility - `backfire-visibility: visible | hidden;` - *定义当元素不面向屏幕时是否可见* + - `backfire-visibility: visible | hidden;` + - *定义当元素不面向屏幕时是否可见* ---- @@ -129,6 +128,3 @@ * [https://www.w3.org/TR/css-transforms-1](https://www.w3.org/TR/css-transforms-1) * [https://dev.opera.com/articles/understanding-the-css-transforms-matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix) - - - From 1b7346ec3ab66f8dcc9413fed54132fa725f1b02 Mon Sep 17 00:00:00 2001 From: Silas Date: Mon, 19 Sep 2016 18:03:07 +0800 Subject: [PATCH 3/4] update image position --- markdown/Transform Matrix.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/markdown/Transform Matrix.md b/markdown/Transform Matrix.md index fe4fd67..7bf27d4 100644 --- a/markdown/Transform Matrix.md +++ b/markdown/Transform Matrix.md @@ -8,6 +8,7 @@ * 本意是母体，基础，孕育生命的地方 * 数学中，表示矩形阵列 + ![matrix](http://odqtkmbuu.bkt.clouddn.com/1.png) ---- @@ -37,6 +38,7 @@ - `transform-origin: top left` * default - `transform-origin: 50% 50%` + ![transform origin](http://odqtkmbuu.bkt.clouddn.com/2.png) ---- @@ -50,9 +52,13 @@ ## Transform Matrix * transform: matrix(a, b, c, d, e, f) + ![transform matrix](http://odqtkmbuu.bkt.clouddn.com/3.png) + * 转换公式 + ![transform formula](http://odqtkmbuu.bkt.clouddn.com/4.png) + * 计算公式 - `x为 transform-origin 第一个参数，y为 transform-origin 第二个参数` - `x’ = ax + cy + e，x'，为变换元素后的水平位置` From 33338e8f7c259adcb43301add63bba384c85e1b3 Mon Sep 17 00:00:00 2001 From: silas <369694143@qq.com> Date: Mon, 19 Sep 2016 18:11:09 +0800 Subject: [PATCH 4/4] update menu.json --- menu.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/menu.json b/menu.json index c6e780b..4de0627 100644 --- a/menu.json +++ b/menu.json @@ -48,6 +48,13 @@ "path": "TypeScript - Carter.md", "title": "TypeScript = Type + JavaScript", "weibo": "" + }, + { + "author": "汤伟伟", + "homepage": "https://github.com/keepsilentw", + "path": "Transform Matrix.md", + "title": "CSS3 Transform Matrix", + "weibo": "" } ] }