From 2d614b2361767202b770e57ff95231694d644300 Mon Sep 17 00:00:00 2001 From: IrisZhang Date: Wed, 13 Jul 2016 15:20:23 +0800 Subject: [PATCH 1/3] Update transform.htm --- properties/transform/transform.htm | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/properties/transform/transform.htm b/properties/transform/transform.htm index ba4a2e37..dd9aeb8f 100644 --- a/properties/transform/transform.htm +++ b/properties/transform/transform.htm @@ -262,10 +262,10 @@

平移：translate(), translateX(), translateY()

旋转：rotate()

缩放：scale()

@@ -301,4 +301,4 @@

扭曲：skew()

- \ No newline at end of file + From 5b5b7e02616ec177e8d90218f8c943b62dd76023 Mon Sep 17 00:00:00 2001 From: IrisZhang Date: Fri, 15 Jul 2016 16:04:16 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A03d=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E7=9A=84=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- properties/transform/transform.htm | 171 ++++++++++++++++++++++++----- 1 file changed, 145 insertions(+), 26 deletions(-) diff --git a/properties/transform/transform.htm b/properties/transform/transform.htm index dd9aeb8f..84e72290 100644 --- a/properties/transform/transform.htm +++ b/properties/transform/transform.htm @@ -212,78 +212,197 @@

示例：

2D transform_CSS参考手册_web前端开发参考手册系列

矩阵变换：matrix()

+

matrix(0, 1, -1, 1, 20, 20) 等价于 translate(20px,20px) rotate(90deg) skew(45deg);

平移：translate(), translateX(), translateY()

旋转：rotate()

-

缩放：scale()

+

缩放：scale(),scaleX(),scaleY()

-

扭曲：skew()

+

扭曲：skew(),skewX(),skewY()

+ +

3D效果

+
+

矩阵：matrix3d();

+

matrix3d(0.642788, 0.766044, 0, 0, -0.766044, 0.642788, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1) 即rotateZ(50deg) translateZ(50px)的效果

+ +

平移：translate3d(),translateZ()

+ +

旋转: rotate3d(),rotateX(),rotateY(),rotateZ()

+

父元素perspective:0;

+ +

父元素perspective:200px;

+ +

缩放：scale3d(),scaleZ()

+

单独使用无效果，需配合其他变形函数一起使用，下面样例添加rotateX(50deg)效果

+ From 100223fb6dba89458c3b3ee33a5b6d6134c635f4 Mon Sep 17 00:00:00 2001 From: IrisZhang Date: Wed, 20 Jul 2016 18:35:57 +0800 Subject: [PATCH 3/3] =?UTF-8?q?keyframes=E8=A7=84=E5=88=99=E6=9C=89?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 参考：http://tympanus.net/codrops/css_reference/keyframes/ --- rules/@keyframes.htm | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/rules/@keyframes.htm b/rules/@keyframes.htm index 351fb256..699b90cf 100644 --- a/rules/@keyframes.htm +++ b/rules/@keyframes.htm @@ -50,7 +50,7 @@

@keyframes

语法：

@keyframes <identifier> { <keyframes-blocks> }

-

<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

+

<keyframes-blocks>：[ [ from | to | <percentage> ] [ , from | to | <percentage> ]*{ sRules } ]*

@@ -211,8 +211,7 @@

示例：

@keyframes staff{ 0%{transform:translate(0,0);} 6%{transform:translate(260px,0);} - 20%{transform:translate(300px,0);} - 30%{transform:translate(300px,0);} + 20%,30%{transform:translate(300px,0);} 40%{transform:translate(200px,0);} 65%{transform:translate(40px,0);} 79%{transform:translate(0,0);} @@ -240,4 +239,4 @@

示例：

- \ No newline at end of file +