update

SUMMARY.md

@@ -10,6 +10,6 @@ This is the summary of my book.
 * [多列](docs/Multiple Columns.md)
 * [UI](docs/User Interface.md)
 * [过渡效果](docs/Transitions Effect.md)
-* [文本特效](docs/Text Effect.md)
+* [文本效果](docs/Text Effect.md)
 * [2D](docs/2D Transform.md)
 * [3D](docs/3D Transform.md)

docs/2D Transform.md

@@ -83,5 +83,11 @@ matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾
         -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 */
     }
-        
-详见<http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/>
+
+## 源码
+
+本文中所用例子源码参见
+<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 2d_transform.html
+
+## 参考
+* <http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/>

docs/3D Transform.md

@@ -0,0 +1,77 @@
+3D 转换
+====
+
+CSS3 3D Transform,用于 3 维动画或旋转。
+
+CSS3 3D 转换是一个属性,用于改变元素的实际形式。这个特性可以改变元素的形状、大小和位置。
+
+主要有下列方法：
+
+* rotateX()
+* rotateY()
+* rotateZ()
+
+**注意：**Internet Explorer 10 和 Firefox 支持 3D 转换；
+Chrome 和 Safari 必须添加前缀 -webkit-；
+Opera 还不支持 3D 转换(支持 2D 转换 )
+
+![](../images/transform-3d.jpg)
+
+## rotateX()
+
+rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
+
+	.rotate-x {
+	    transform: rotateX(60deg);
+	    -webkit-transform: rotateX(120deg); /* Safari and Chrome */
+	}
+
+
+## rotateY()
+
+rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
+
+    .rotate-y {
+        transform: rotateY(60deg);
+        -webkit-transform: rotateY(120deg); /* Safari and Chrome */
+    }
+
+## rotateZ()
+
+rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。
+
+    .rotate-z {
+        transform: rotateZ(60deg);
+        -webkit-transform: rotateY(120deg); /* Safari and Chrome */
+    }
+
+## rotate3d()
+otate3d(x,y,z,a)中取值说明：
+
+* x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
+* y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
+* z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
+* a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
+面介绍的三个旋转函数功能等同：
+
+* rotateX(a)函数功能等同于rotate3d(1,0,0,a)
+* rotateY(a)函数功能等同于rotate3d(0,1,0,a)
+* rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
+
+    .rotate-3d {
+        transform: rotate3d(0,0.6,0.2,60deg);
+        -webkit-transform: rotate3d(0.6,0.6,0.2,60deg); /* Safari and Chrome */
+    }
+
+## 转换方法
+
+<table class="reference"> <tbody><tr> <th style="width:25%;">函数</th> <th>描述</th> </tr> <tr> <td>matrix3d(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<br><i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td> <td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> </tr> <tr> <td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td> <td>定义 3D 转化。</td> </tr> <tr> <td>translateX(<i>x</i>)</td> <td>定义 3D 转化，仅使用用于 X 轴的值。</td> </tr> <tr> <td>translateY(<i>y</i>)</td> <td>定义 3D 转化，仅使用用于 Y 轴的值。</td> </tr> <tr> <td>translateZ(<i>z</i>)</td> <td>定义 3D 转化，仅使用用于 Z 轴的值。</td> </tr> <tr> <td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td> <td>定义 3D 缩放转换。</td> </tr> <tr> <td>scaleX(<i>x</i>)</td> <td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td> </tr> <tr> <td>scaleY(<i>y</i>)</td> <td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td> </tr> <tr> <td>scaleZ(<i>z</i>)</td> <td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td> </tr> <tr> <td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td> <td>定义 3D 旋转。</td> </tr> <tr> <td>rotateX(<i>angle</i>)</td> <td>定义沿 X 轴的 3D 旋转。</td> </tr> <tr> <td>rotateY(<i>angle</i>)</td> <td>定义沿 Y 轴的 3D 旋转。</td> </tr> <tr> <td>rotateZ(<i>angle</i>)</td> <td>定义沿 Z 轴的 3D 旋转。</td> </tr> <tr> <td>perspective(<i>n</i>)</td> <td>定义 3D 转换元素的透视视图。</td> </tr> </tbody></table>
+
+## 源码
+
+本文中所用例子源码参见
+<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 3d_transform.html
+
+## 参考
+* <http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/>
+* <http://www.w3cplus.com/css3/css3-3d-transform.html>

docs/Multiple Columns.md

@@ -0,0 +1,35 @@
+多列
+====
+
+CSS3 多列再需要设计多个布局时是非常有用的。比如，报纸布局。
+
+主要属性如下：
+
+* column-count ： 指定元素的列数
+* column-rule ： 指定的列之间的差距
+* column-gap ： 设置列之间的宽度，样式和颜色
+
+例子：
+
+    .newspaper {
+        column-count: 3;
+        -moz-column-count: 3; /* Firefox */
+        -webkit-column-count: 3; /* Safari and Chrome */
+
+        column-gap: 40px;
+        -moz-column-gap: 40px; /* Firefox */
+        -webkit-column-gap: 40px; /* Safari and Chrome */
+
+        column-rule: 4px outset #ff00ff;
+        -moz-column-rule: 4px outset #ff00ff; /* Firefox */
+        -webkit-column-rule: 4px outset #ff00ff; /* Safari and Chrome */
+    }
+
+## 属性
+
+<table width="100%" class="reference"> <tbody><tr> <th width="28%" align="left">属性</th> <th width="67%" align="left">说明</th> <th width="5%" align="left">CSS</th> </tr> <tr> <td><a href="#">column-count</a></td> <td>指定元素应分为的列数</td> <td>3</td> </tr> <tr> <td><a href="#">column-fill</a></td> <td>指定如何填充列</td> <td>3</td> </tr> <tr> <td><a href="#">column-gap</a></td> <td>指定列之间差距</td> <td>3</td> </tr> <tr> <td><a href="#">column-rule</a></td> <td>一个用于设置所有列规则的简写属性</td> <td>3</td> </tr> <tr> <td><a href="#">column-rule-color</a></td> <td>指定的列之间颜色规则</td> <td>3</td> </tr> <tr> <td><a href="#">column-rule-style</a></td> <td>指定的列之间的样式规则</td> <td>3</td> </tr> <tr> <td><a href="#">column-rule-width</a></td> <td>指定的列之间的宽度规则</td> <td>3</td> </tr> <tr> <td><a href="#">column-span</a></td> <td>指定一个元素应该横跨多少列</td> <td>3</td> </tr> <tr> <td><a href="#">column-width</a></td> <td>指定列的宽度</td> <td>3</td> </tr> <tr> <td><a href="#">columns</a></td> <td>缩写属性设置列宽和列数</td> <td>3</td> </tr> </tbody></table>
+
+## 源码
+
+本文中所用例子源码参见
+<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 multiple_columns.html

docs/Text Effect.md

@@ -0,0 +1,41 @@
+文本效果
+====
+
+CSS3 文本效果是这样一个术语用来在正常的文本中实现一些额外的特性。
+
+主要是两个属性的 CSS3 文本效果,如下:
+
+* text-shadow
+* word-wrap
+
+**注意:**Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性。所有的主流浏览器支持自动换行（word-wrap）属性。Internet Explorer 9及更早IE版本不支持 text-shadow 属性
+
+## text-shadow
+
+文本阴影。
+您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
+
+    .text-shadow {
+        text-shadow: 10px 10px 10px #6AAFCF;
+    }
+
+
+## word-wrap
+
+换行。
+CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
+
+    .word-wrap {
+        word-wrap: break-word;
+        width: 150px;
+        border: 1px solid #ff0000;
+    }
+
+## 属性
+
+<table class="reference"> <tbody><tr> <th style="width:25%;">属性</th> <th>描述</th> <th style="width:5%;">CSS</th> </tr> <tr> <td><a href="#" title="CSS3 hanging-punctuation 属性">hanging-punctuation</a></td> <td>规定标点字符是否位于线框之外。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 punctuation-trim 属性">punctuation-trim</a></td> <td>规定是否对标点字符进行修剪。</td> <td>3</td> </tr> <tr> <td>text-align-last</td> <td>设置如何对齐最后一行或紧挨着强制换行符之前的行。</td> <td>3</td> </tr> <tr> <td>text-emphasis</td> <td>向元素的文本应用重点标记以及重点标记的前景色。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 text-justify 属性">text-justify</a></td> <td>规定当 text-align 设置为 "justify" 时所使用的对齐方法。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 text-outline 属性">text-outline</a></td> <td>规定文本的轮廓。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 text-overflow 属性">text-overflow</a></td> <td>规定当文本溢出包含元素时发生的事情。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 text-shadow 属性">text-shadow</a></td> <td>向文本添加阴影。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 text-wrap 属性">text-wrap</a></td> <td>规定文本的换行规则。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 word-break 属性">word-break</a></td> <td>规定非中日韩文本的换行规则。</td> <td>3</td> </tr> <tr> <td><a href="#" title="CSS3 word-wrap 属性">word-wrap</a></td> <td>允许对长的不可分割的单词进行分割并换行到下一行。</td> <td>3</td> </tr> </tbody></table>
+
+## 源码
+
+本文中所用例子源码参见
+<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 texteffects.html

docs/Transitions Effect.md

@@ -0,0 +1,56 @@
+过渡效果
+====
+
+CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
+
+尽管 CSS3 过渡效果是足够的过渡的一个元素,但是 text-transform 属性可以提高 CSS3 过渡效果的风格。
+
+主要有四个属性的CSS3转换效果,已被描述如下:
+
+* transition-property
+* transition-duration
+* transition-timing-function
+* transition-delay
+
+**注意：**Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，需要前缀 -webkit-
+
+## transition-property
+
+规定应用过渡的 CSS 属性的名称。
+
+	transition-property: all;
+	transition-property: none;
+	transition-property: background-color;
+	transition-property: background-color, height, width;
+
+
+## transition-duration
+
+定义过渡效果花费的时间。默认是 0。 时间单位可以是秒/毫秒。
+
+	transition-duration: 2s;
+	transition-duration: 1000ms;
+	transition-duration: 1000ms, 2000ms;
+
+## transition-timing-function
+
+规定过渡效果的时间曲线。默认是 "ease"。
+
+	transition-timing-function: ease;
+	transition-timing-function: ease-in;
+	transition-timing-function: ease-in-out;
+	transition-timing-function: ease, linear;
+	transition-timing-function: cubic-bezier(1.000, 0.835, 0.000, 0.945);
+
+## transition-delay
+
+规定过渡效果何时开始。默认是 0。
+
+	transition-delay: 2s;
+	transition-delay: 1000ms, 2000ms;
+	transition-delay: -2s;
+
+## 源码
+
+本文中所用例子源码参见
+<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 transitions.html

docs/User Interface.md

@@ -0,0 +1,89 @@
+UI
+====
+
+增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
+
+在本章中，您将了解以下的用户界面属性：
+
+* resize
+* box-sizing
+* outline-offset
+
+**注意：**Firefox、Chrome 以及 Safari 支持 resize 属性。
+Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
+所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
+
+## resize
+
+resize 属性指定一个元素是否应该由用户去调整大小。可以使用  `resize:both`， `resize:vertical` 或者 `resize:horizontal`，用来分别设置元素是可以水平、垂直调整，垂直调整，水平调整。
+
+例子
+
+    .div-both {
+        border: 1px solid green;
+        margin-top: 20px;
+        padding: 15px 30px;
+        width: 250px;
+        resize: both;
+        overflow: auto;
+    }
+
+    .div-horizontal {
+        border: 1px solid green;
+        margin-top: 20px;
+        padding: 15px 30px;
+        width: 250px;
+        resize: horizontal;
+        overflow: auto;
+    }
+
+    .div-vertical {
+        border: 1px solid green;
+        margin-top: 20px;
+        padding: 15px 30px;
+        width: 250px;
+        resize: vertical;
+        overflow: auto;
+    }
+
+## box-sizing
+
+box-sizing 允许您以确切的方式定义适应某个区域的具体内容
+
+例子
+
+    .box-sizing {
+        box-sizing: border-box;
+        -moz-box-sizing: border-box; /* Firefox */
+        width: 50%;
+        border: 1em solid red;
+        float: left;
+    }
+
+## outline-offset
+
+outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
+
+轮廓与边框有两点不同：
+
+* 轮廓不占用空间
+* 轮廓可能是非矩形
+
+例子
+
+    .outline-offset {
+        width: 180px;
+        height: 80px;
+        border: 1px solid red;
+        outline: 1px solid green;
+        outline-offset: 20px;
+    }
+
+## 属性
+
+<table class="reference"> <tbody><tr> <th width="28%" align="left">属性</th> <th width="67%" align="left">说明</th> <th width="5%" align="left">CSS</th> </tr> <tr> <td><a href="#">appearance</a></td> <td>允许您使一个元素的外观像一个标准的用户界面元素</td> <td>3</td> </tr> <tr> <td><a href="#">box-sizing</a></td> <td>允许你以适应区域而用某种方式定义某些元素</td> <td>3</td> </tr> <tr> <td><a href="#">icon</a></td> <td>Provides the author the ability to style an element with an iconic equivalent</td> <td>3</td> </tr> <tr> <td><a href="#">nav-down</a></td> <td>指定在何处使用箭头向下导航键时进行导航</td> <td>3</td> </tr> <tr> <td><a href="#">nav-index</a></td> <td>指定一个元素的Tab的顺序</td> <td>3</td> </tr> <tr> <td><a href="#">nav-left</a></td> <td>指定在何处使用左侧的箭头导航键进行导航</td> <td>3</td> </tr> <tr> <td><a href="#">nav-right</a></td> <td>指定在何处使用右侧的箭头导航键进行导航</td> <td>3</td> </tr> <tr> <td><a href="#">nav-up</a></td> <td>指定在何处使用箭头向上导航键时进行导航</td> <td>3</td> </tr> <tr> <td><a href="#">outline-offset</a></td> <td>外轮廓修饰并绘制超出边框的边缘</td> <td>3</td> </tr> <tr> <td><a href="#">resize</a></td> <td>指定一个元素是否是由用户调整大小</td> <td>3</td> </tr> </tbody></table>
+
+## 源码
+
+本文中所用例子源码参见
+<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 userinterface.html