From 75ac385563ef844830435ae5050a49029765b005 Mon Sep 17 00:00:00 2001 From: waylau Date: Tue, 30 Jun 2015 23:42:36 +0800 Subject: [PATCH] update --- docs/2D Transform.md | 51 ++++++++++++++++-- images/skew.jpg | Bin 0 -> 6488 bytes images/skewx.jpg | Bin 0 -> 5247 bytes images/skewy.jpg | Bin 0 -> 3747 bytes ...sform-translate.html => 2d_transform.html} | 10 ++++ 5 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 images/skew.jpg create mode 100644 images/skewx.jpg create mode 100644 images/skewy.jpg rename samples/{transform-translate.html => 2d_transform.html} (82%) diff --git a/docs/2D Transform.md b/docs/2D Transform.md index 99dc362..539dee9 100644 --- a/docs/2D Transform.md +++ b/docs/2D Transform.md @@ -2,7 +2,7 @@ ==== CSS3 转换 -CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。 +CSS3转换,我们可以斜拉(skew),缩放(scale),旋转(rotate)以及位移(translate)元素。 @@ -21,22 +21,67 @@ Internet Explorer 9 要求前缀 -ms- 版本. translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 - + .translate { + transform: translate(50px, 100px); + -ms-transform: translate(50px, 100px); /* IE 9 */ + -webkit-transform: translate(50px, 100px); /* Safari and Chrome */ + } + ## rotate() -rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。 +rotate()方法,在一个给定度数沿着元素中心顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。 + .rotate + { + transform:rotate(30deg); + -ms-transform:rotate(30deg); /* IE 9 */ + -webkit-transform:rotate(30deg); /* Safari and Chrome */ + } + ## scale() scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数: + .scale + { + transform: scale(2,4); + -ms-transform: scale(2,4); /* IE 9 */ + -webkit-transform: scale(2,4); /* Safari and Chrome */ + } + ## skew() skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度: + .skew + { + transform:skew(30deg,20deg); + -ms-transform:skew(30deg,20deg); /* IE 9 */ + -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ + } + +skewX(30deg) 如下图: + +![](../images/skewx.jpg) + +skewY(10deg) 如下图: + +![](../images/skewy.jpg) + +skew(30deg, 10deg) 如下图: + +![](../images/skew.jpg) ## matrix() matrix()方法和2D变换方法合并成一个。 matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。 + .matrix + { + transform:matrix(0.866,0.5,-0.5,0.866,0,0); + -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ + -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ + } + +详见 \ No newline at end of file diff --git a/images/skew.jpg b/images/skew.jpg new file mode 100644 index 0000000000000000000000000000000000000000..84092f5b23894005d110c973c1a170b08826d752 GIT binary patch literal 6488 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 literal 0 HcmV?d00001 diff --git a/images/skewy.jpg b/images/skewy.jpg new file mode 100644 index 0000000000000000000000000000000000000000..129a15795df3a732114e942bc67bf6f331ef1dc5 GIT binary patch literal 3747 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 literal 0 HcmV?d00001 diff --git a/samples/transform-translate.html b/samples/2d_transform.html similarity index 82% rename from samples/transform-translate.html rename to samples/2d_transform.html index fc47b67..15238b9 100644 --- a/samples/transform-translate.html +++ b/samples/2d_transform.html @@ -10,6 +10,7 @@ @@ -55,5 +63,7 @@
Hello. This is a scale DIV element.
Hello. This is a skew DIV element.
+ +
Hello. This is a matrix DIV element.