diff --git a/Booklist.md b/Booklist.md index 389c7c1..52a6a0b 100644 --- a/Booklist.md +++ b/Booklist.md @@ -2,14 +2,14 @@ **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* -- [Booklist](#booklist) +- [书单](#%E4%B9%A6%E5%8D%95) - [HTML](#html) - [CSS](#css) - [JavaScript](#javascript) -# Booklist +# 书单 ## HTML diff --git a/DO_NOT_OPEN/Quiz0.html b/DO_NOT_OPEN/Quiz0.html new file mode 100644 index 0000000..35f8f7a --- /dev/null +++ b/DO_NOT_OPEN/Quiz0.html @@ -0,0 +1,56 @@ + + + + + + 图书畅销榜 + + + + + +
+

图书畅销榜

+
    +
  1. 当我足够好，才能遇见你
    2. +
  2. 皮囊
    3. +
  3. 李光耀论中国与世界
    4. +
  4. 乖，摸摸头
    5. +
  5. 男女内参
    6. +
+
+ + + diff --git a/DO_NOT_OPEN/Quiz1.html b/DO_NOT_OPEN/Quiz1.html new file mode 100644 index 0000000..c079e7f --- /dev/null +++ b/DO_NOT_OPEN/Quiz1.html @@ -0,0 +1,50 @@ + + + + + 运费详情 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
运费详情
地域寄达地首重（元/1000g）续重（元/1000g）
一区浙江、上海、江苏61
江西、安徽71
二区吉利、黑龙江、云南106
三区新疆、西藏1510
+ + \ No newline at end of file diff --git a/DO_NOT_OPEN/Quiz3.html b/DO_NOT_OPEN/Quiz3.html new file mode 100644 index 0000000..25601fe --- /dev/null +++ b/DO_NOT_OPEN/Quiz3.html @@ -0,0 +1,50 @@ + + + + + 表单 + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + +
+
+ + + + + +
+
+ + +
+ +
+ + \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8833da1 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Li Xinyang + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Progress.md b/Progress.md index e9ef221..82694ed 100644 --- a/Progress.md +++ b/Progress.md @@ -2,40 +2,12 @@ **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* -<<<<<<< HEAD -<<<<<<< HEAD -======= - [Javascript程序设计 20/23](#javascript%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-2023) -======= -<<<<<<< HEAD ->>>>>>> li-xinyang/master -- [Javascript程序设计 16/23](#javascript%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-1623) -======= -- [Javascript程序设计 20/23](#javascript%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-2023) ->>>>>>> li-xinyang/master -<<<<<<< HEAD -======= ->>>>>>> Note ->>>>>>> li-xinyang/master - [页面制作 39/41](#%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C-3941) -<<<<<<< HEAD -<<<<<<< HEAD -======= -# Javascript程序设计 20/23 -======= -<<<<<<< HEAD ->>>>>>> li-xinyang/master -# Javascript程序设计 16/23 -======= # Javascript程序设计 20/23 ->>>>>>> li-xinyang/master -<<<<<<< HEAD -======= ->>>>>>> Note ->>>>>>> li-xinyang/master |章节|课题|状态|时间戳| |----|----|----|------| @@ -61,7 +33,7 @@ |闭包|闭包|★|1506091529| |面向对象|简介||| |面向对象|原型||| -|面向对象|JS面向对象||| +|面向对象|JS面向对象|||| # 页面制作 39/41 diff --git a/README.md b/README.md index 960eaf6..69d3bb3 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,32 @@ - - -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* +# 前端开发笔记本 -- [知识体系内容记录](#%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB%E5%86%85%E5%AE%B9%E8%AE%B0%E5%BD%95) - - [Javascript 程序设计](#javascript-%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1) - - [页面制作](#%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C) - - [DOM 编程](#dom-%E7%BC%96%E7%A8%8B) - - [页面架构](#%E9%A1%B5%E9%9D%A2%E6%9E%B6%E6%9E%84) - - [产品前端架构](#%E4%BA%A7%E5%93%81%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84) -- [相关资源](#%E7%9B%B8%E5%85%B3%E8%B5%84%E6%BA%90) -- [相关链接](#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5) +点击[这里](https://www.gitbook.com/read/book/li-xinyang/frontend-notebook)开始阅读！ - +前端开发笔记本的 GitHub 地址在[这里](https://github.com/li-xinyang/FEND_Note)。如果你觉得这个项目不错，请点击 Star 一下，您的支持是我最大的动力。 -## 知识体系内容记录 + +Star +  Watch +  Fork +  Download ![](img/C/career-path.jpg) -### Javascript 程序设计 +### 写作进程 -<<<<<<< HEAD -<<<<<<< HEAD -======= -![](http://progressed.io/bar/87?title=Progress) [详情](JavascriptDesignPattern/JavascriptDesignPattern.md) -======= -<<<<<<< HEAD ->>>>>>> li-xinyang/master -![](http://progressed.io/bar/70?title=Progress) [详情](JavascriptDesignPattern/JavascriptDesignPattern.md) -======= -![](http://progressed.io/bar/87?title=Progress) [详情](JavascriptDesignPattern/JavascriptDesignPattern.md) ->>>>>>> li-xinyang/master -<<<<<<< HEAD -======= ->>>>>>> Note ->>>>>>> li-xinyang/master +|章节|名称|进程| +|----|----|----| +|第一章|页面制作|![](http://progressed.io/bar/100)| +|第二章|JavaScript 程序设计|![](http://progressed.io/bar/87)| +|第三章|DOM 编程|![](http://progressed.io/bar/0)| +|第四章|页面构架|![](http://progressed.io/bar/0)| +|第五章|前端产品构架|![](http://progressed.io/bar/0)| -### 页面制作 - -![](http://progressed.io/bar/100?title=Progress) [详情](WebCreation/WebCreation.md) - -### DOM 编程 - -![](http://progressed.io/bar/0?title=Progress) [详情](#) - -### 页面架构 - -![](http://progressed.io/bar/0?title=Progress) [详情](#) - -### 产品前端架构 - -![](http://progressed.io/bar/0?title=Progress) [详情](#) - -## 相关资源 - -- [书单](Booklist.md) - -## 相关链接 +### 相关链接 - [NEC](http://nec.netease.com/) {N: nice, E: easy, C: css;} -Creative Commons License
This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. \ No newline at end of file +Creative Commons License
This work by Li Xinyang is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + + + \ No newline at end of file diff --git a/SUMMARY.md b/SUMMARY.md new file mode 100644 index 0000000..cd5118d --- /dev/null +++ b/SUMMARY.md @@ -0,0 +1,41 @@ +# Summary + +- [页面制作](chapter1/00_intro.md) + - [Photoshop](chapter1/01_photoshop.md) + - [工具、面板、视图](chapter1/01_01_tool_panel_view.md) + - [测量及取色](chapter1/01_02_measurement_and_color.md) + - [切图](chapter1/01_03_slice.md) + - [图片保存](chapter1/01_04_save_image.md) + - [图片优化与合并](chapter1/01_05_image_optimisation.md) + - [开发及调试工具](chapter1/02_dev_tools.md) + - [Sublime 快捷键](chapter1/02_01_sublime.md) + - [HTML](chapter1/03_html.md) + - [HTML 简介](chapter1/03_01_html_intro.md) + - [HTML 语法](chapter1/03_02_html_sytax.md) + - [HTML 标签](chapter1/03_05_html_tags.md) + - [实体字符](chapter1/03_03_html_ascii_encoding.md) + - [浏览器兼容](chapter1/03_04_cross_browser.md) + - [CSS](chapter1/04_css_intro.md) + - [语法](chapter1/04_01_css_sytax.md) + - [选择器](chapter1/04_02_selector.md) + - [文本](chapter1/04_03_text.md) + - [盒模型](chapter1/04_04_box_model.md) + - [背景](chapter1/04_05_background.md) + - [布局](chapter1/04_06_layout.md) + - [变形](chapter1/04_07_transform.md) + - [动画](chapter1/04_08_animation.md) +- [JavaScript 程序设计](chapter2/00_intro.md) + - [JavaScript 介绍](chapter2/01_javascript_intro.md) + - [调试器](chapter2/02_dev_tools.md) + - [基础语法](chapter2/03_basic_syntax.md) + - [类型系统](chapter2/04_data_type.md) + - [内置对象](chapter2/05_internal_object.md) + - [变量作用域](chapter2/06_scope.md) + - [表达式与运算符号](chapter2/07_statement_and_operator.md) + - [语句](chapter2/08_statement.md) + - [闭包](chapter2/09_closure.md) + - [面向对象](chapter2/10_object.md) +- [DOM 编程]() +- [页面架构]() +- [产品前端架构]() +- [附录 A：书单](Booklist.md) \ No newline at end of file diff --git a/SampleCode/CSS/Animation.html b/SampleCode/CSS/Animation.html new file mode 100644 index 0000000..da692ae --- /dev/null +++ b/SampleCode/CSS/Animation.html @@ -0,0 +1,57 @@ + + + + + + Animation + + + + +

动画 animation

+
+
+
+ + + + diff --git a/SampleCode/CSS/AnimationPractice.html b/SampleCode/CSS/AnimationPractice.html new file mode 100644 index 0000000..97c9338 --- /dev/null +++ b/SampleCode/CSS/AnimationPractice.html @@ -0,0 +1,151 @@ + + + + + + Animation Practice + + + + +

3D 正方体组合旋转

+
+
back
+
front
+
right
+
left
+
botto
+
top
+
+ + + + diff --git a/SampleCode/CSS/Transform2D.html b/SampleCode/CSS/Transform2D.html new file mode 100644 index 0000000..2ce8dfd --- /dev/null +++ b/SampleCode/CSS/Transform2D.html @@ -0,0 +1,185 @@ + + + + + + Transform 2D + + + + +

Transform 2D

+

可忽略所有:after的样式

+

transform (translate & rotate)

+
+
+
+

translate(50%) -> rotate(45deg)

+
+
+ +
+
+
+

rotate(45deg) -> translate(50%)

+
+
+ +

translate-origin

+
+
+
+

transform-origin: 100% 100%

+
+
+ +

scale

+
+
+
+

scale(0.5)

+
+
+ +
+
+
+

rotate(45deg) scale(1.5, 2)

+
+
+ + +

skew

+
+
+
+

skew(-45deg, 45deg)

+
+
+ + + + diff --git a/SampleCode/CSS/Transform3D.html b/SampleCode/CSS/Transform3D.html new file mode 100644 index 0000000..8fcfcb7 --- /dev/null +++ b/SampleCode/CSS/Transform3D.html @@ -0,0 +1,236 @@ + + + + + + Transfomr 3D + + + + +

Transform 3D

+

可以忽略所有:after的样式

+

rotate

+
+
+
+
+
+
+ +

perspective-origin

+
+
+
+

top

+
+
+
+
+

50% 50%

+
+
+
+
+

bottom

+
+ +

translate3d(x, y, z)

+
+
+
+

(10px, 10px, 200px)

+
+
+
+
+

(0, 0, -100px)

+
+
+
+
+

(0, 0, 0)

+
+ +

scale3d

+

改变轴的比例

+
+
+
+

scale3d(1.2, 1.2, 1)

+
+ +

rotate3d

+
+
+
+

(0, 0, 1, 45deg)

+
+
+
+
+

(1, 1, 1, 45deg)

+
+
+
+
+

(-1, -1, -1, 45deg)

+
+ +

transform-style

+
+
+
+
+
+

preserve-3d

+
+ +
+
+
+
+
+

flat

+
+ +

backface-visibility

+
+
+

B

+
+
+

visible

+
+
+
+

B

+
+
+

hidden

+
+ + + + diff --git a/SampleCode/CSS/Transition.html b/SampleCode/CSS/Transition.html new file mode 100644 index 0000000..119f279 --- /dev/null +++ b/SampleCode/CSS/Transition.html @@ -0,0 +1,193 @@ + + + + + + Transition + + + + +

动画 - Transition

+

transition

+
+
+
+

无过度

+
+
+
+
+

有过度

+
+ +

transition-property

+
+
+

none

+
+
+ +
+
+

all

+
+
+ +
+
+

left

+
+
+ +
+
+

color

+
+
+ +

多个动画，多个时间

+
+
+

multipe

+
+
+ + + + diff --git a/WebCreation/WebCreation-CSS-1.md b/WebCreation/WebCreation-CSS-1.md deleted file mode 100644 index f1f1f40..0000000 --- a/WebCreation/WebCreation-CSS-1.md +++ /dev/null @@ -1,707 +0,0 @@ - - -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - -- [文本](#%E6%96%87%E6%9C%AC) - - [字体](#%E5%AD%97%E4%BD%93) - - [改变字号](#%E6%94%B9%E5%8F%98%E5%AD%97%E5%8F%B7) - - [改变字体](#%E6%94%B9%E5%8F%98%E5%AD%97%E4%BD%93) - - [加粗字体](#%E5%8A%A0%E7%B2%97%E5%AD%97%E4%BD%93) - - [倾斜字体](#%E5%80%BE%E6%96%9C%E5%AD%97%E4%BD%93) - - [更改行距](#%E6%9B%B4%E6%94%B9%E8%A1%8C%E8%B7%9D) - - [font shorthand](#font-shorthand) - - [改变文字颜色](#%E6%94%B9%E5%8F%98%E6%96%87%E5%AD%97%E9%A2%9C%E8%89%B2) - - [对齐方式](#%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F) - - [文字居中](#%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD) - - [文本垂直对齐](#%E6%96%87%E6%9C%AC%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90) - - [文本缩进](#%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B) - - [格式处理](#%E6%A0%BC%E5%BC%8F%E5%A4%84%E7%90%86) - - [保留空格格式](#%E4%BF%9D%E7%95%99%E7%A9%BA%E6%A0%BC%E6%A0%BC%E5%BC%8F) - - [文字换行](#%E6%96%87%E5%AD%97%E6%8D%A2%E8%A1%8C) - - [文本装饰](#%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0) - - [文字阴影](#%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1) - - [文本装饰（下划线等）](#%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0%EF%BC%88%E4%B8%8B%E5%88%92%E7%BA%BF%E7%AD%89%EF%BC%89) - - [高级设置](#%E9%AB%98%E7%BA%A7%E8%AE%BE%E7%BD%AE) - - [省略字符](#%E7%9C%81%E7%95%A5%E5%AD%97%E7%AC%A6) - - [更换鼠标形状](#%E6%9B%B4%E6%8D%A2%E9%BC%A0%E6%A0%87%E5%BD%A2%E7%8A%B6) - - [强制继承](#%E5%BC%BA%E5%88%B6%E7%BB%A7%E6%89%BF) -- [盒模型](#%E7%9B%92%E6%A8%A1%E5%9E%8B) - - [属性](#%E5%B1%9E%E6%80%A7) - - [width](#width) - - [height](#height) - - [padding](#padding) - - [margin](#margin) - - [margin 合并](#margin-%E5%90%88%E5%B9%B6) - - [border](#border) - - [border-radius](#border-radius) - - [overflow](#overflow) - - [box-sizing](#box-sizing) - - [box-shadow](#box-shadow) - - [outline](#outline) - - [TRBL](#trbl) - - [值缩写](#%E5%80%BC%E7%BC%A9%E5%86%99) -- [背景](#%E8%83%8C%E6%99%AF) - - [background-color](#background-color) - - [background-image](#background-image) - - [background-repeat](#background-repeat) - - [background-attachment](#background-attachment) - - [background-position](#background-position) - - [Sprite 的使用](#sprite-%E7%9A%84%E4%BD%BF%E7%94%A8) - - [linear-gradient](#linear-gradient) - - [radial-gradient](#radial-gradient) - - [repeat-*-gradient](#repeat--gradient) - - [background-origin](#background-origin) - - [background-clip](#background-clip) - - [background-size](#background-size) - - [background shorthand](#background-shorthand) - - - -### 文本 - -

See the Pen FEND_Fonts by Li Xinyang (@li-xinyang) on CodePen.

- - -#### 字体 - -##### 改变字号 - -`font-size: | | | | inherit` - -- `` 有 small large medium -- `` 有 smaller larger - -```stylus -div - font-size 12px - p#sample0 - font-size 16px - p#sample1 - font-size 2em - p#sample2 - font-size 200% -``` - -NOTE：以上两值在开发中并不常用。`2em` 与 `200%` 都为父元素默认大小的两倍（参照物为父元素的字体大小 `12px`）。 - -##### 改变字体 - -`font-family: [ | ]# ` - -`` 可选选项，但具体使用字体由浏览器决定 -- serif -- sans-serif -- cursive -- fantasy -- monospace - -```css -font-family: arial, Verdana, sans-serif; -``` - -NOTE：优先使用靠前的字体 - -##### 加粗字体 - -`font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900` - -```css -font-weight: normal; -font-weight: bold; -``` - -##### 倾斜字体 - -`font-style: normal | italic | oblique | inherit` - -`italic` 使用字体中的斜体，而 `oblique` 在没有斜体字体时强制倾斜字体。 - -##### 更改行距 - -`line-height: normal | | | ` - -`normal` 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右） - -```css -/* length 类型 */ -line-height: 40px; -line-height: 3em; -/* percentage 类型 */ -line-height: 300%; -/* number 类型 */ -line-height: 3; -``` - -NOTE：当`line-height`为 `number` 类型时，子类直接继承其数值（不计算直接继承）。而当为 `percentage` 类型时，子类则会先计算再显示（先计算后继承）。 - -##### font shorthand - -`font: [ [ <‘font-style’> || || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar` - -```css -font: 30px/2 "Consolas", monospace; -font: italic bold 20px/1.5 arial, serif; -font: 20px arial, serif; -``` - -NOTE：当其他值为空时，均被设置为默认值。 - -##### 改变文字颜色 - -`color: ` - -```css -element { color: red; } -element { color: #f00; } -element { color: #ff0000; } -element { color: rgb(255,0,0); } -element { color: rgb(100%, 0%, 0%); } -element { color: hsl(0, 100%, 50%); } - -/* 50% translucent */ -element { color: rgba(255, 0, 0, 0.5); } -element { color: hsla(0, 100%, 50%, 0.5); } - -/* 全透明 */ -element { color: transparent' } -element { color: rgba(0, 0, 0, 0); } -``` - -#### 对齐方式 - -##### 文字居中 - -`text-align: start | end | left | right | center | justify | match-parent | start end` - -NOTE：默认为文本左对齐。 - -##### 文本垂直对齐 - -`vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | | ` - -NOTE：``的参照物为`line-height` - -##### 文本缩进 - -`text-indent: | && [ hanging || each-line ]` - -NOTE：缩进两个字可使用 `text-indent: 2em;` - -#### 格式处理 - -##### 保留空格格式 - -`white-space: normal | pre | nowrap | pre-wrap | pre-line` - -`pre` 行为同 `
` 一致。
-
-
- 
-  
-   
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-  
- 
-
 New linesSpaces and tabsText wrapping
normalCollapseCollapseWrap
nowrapCollapseCollapseNo wrap
prePreservePreserveNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap

-
-##### 文字换行
-
-`word-wrap: normal | break-word`
-
-NOTE：允许长单词自动换行。
-
-`word-break: normal | break-all | keep-all`
-
-NOTE：`break-all` 单词中的任意字母间都可以换行。
-
-#### 文本装饰
-
-##### 文字阴影
-
-`text-shadow:none | #` 或 `text-shadow:none | [{2,3}&&?]#`
-
-```css
-p {
-  text-shadow: 1px 1px 1px #000,
-               3px 3px 5px blue;
-}
-```
-
-1. value = The X-coordinate X 轴偏移像素
-2. value = The Y-coordinate Y 轴偏移像素
-3. value = The blur radius  阴影模糊半径
-4. value = The color of the shadow 阴影颜色（默认为文字颜色）
-
-##### 文本装饰（下划线等）
-
-`text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>`
-
-```css
-h1.under {
-    text-decoration: underline;
-}
-h1.over {
-    text-decoration: overline;
-}
-p.line {
-    text-decoration: line-through;
-}
-p.blink {
-    text-decoration: blink;
-}
-a.none {
-    text-decoration: none;
-}
-p.underover {
-    text-decoration: underline overline;
-}
-```
-
-#### 高级设置
-
-##### 省略字符
-
-`text-overflow: [ clip | ellipsis |  ]{1,2}`
-
-```css
-/* 常用配合 */
-text-overflow: ellipsis;
-overflow: hidden; /* 溢出截取 */
-white-space: nowrap; /* 禁止换行 */
-```
-
-##### 更换鼠标形状
-
-`cursor: [[,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit`
-
-**常用属性**
-
-`cursor: [,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]`
-
-- `` 图片资源地址代替鼠标默认形状
-- `` 默认光标
-- `` 隐藏光标
-- `` 手型光标
-- ``
-- ``
-- ``
-
-```css
-cursor: pointer;
-cursor: url(image-name.cur), pointer;
-/* 当 uri 失效时或者则会起作用 */
-```
-
-##### 强制继承
-
-`inherit` 会强制继承父元素的属性值。
-
-```css
-font-size: inherit;
-font-family: inherit;
-font-weight: inherit;
-...
-word-wrap: inherit;
-work-break: inherit
-text-showdow: inherit
-```
-
-NOTE：具体在使用时可查询文档
-
-### 盒模型
-
-
See the Pen FEND_003_BoxModel by Li Xinyang (@li-xinyang) on CodePen.

-
-
-#### 属性
-
-![](../img/B/box-module.jpg)
-
-##### width
-
-**内容盒子宽**
-
-`width:  |  | auto | inherit`
-
-NOTE：通常情况下百分比得参照物为元素的父元素。`max-width` 与 `min-width` 可以设置最大与最小宽度。
-
-##### height
-
-**内容盒子高**
-
-`height:  |  | auto | inherit`
-
-NOTE：默认情况元素的高度为内容高度。`max-height` 与 `min-height` 可以设置最大与最小高度。
-
-##### padding
-
-![](../img/P/padding-sample.png)
-
-`padding: [ | ]{1,4} | inherit`
-
-##### margin
-
-![](../img/M/margin-sample.png)
-
-`margin: [ |  | auto]{1,4} | inherit`
-
-NOTE：`margin` 默认值为 `auto`
-
-Trick：
-
-```
-/* 可用于水平居中 */
-margin: 0 auto;
-```
-
-###### margin 合并
-
-![](../img/M/margin-merge.png)
-
-毗邻元素外间距（margin）会合并，既取相对较大的值。父元素与第一个和最后一个子元素的外间距也可合并。
-
-##### border
-
-![](../img/B/border-sample.png)
-
-```
-border: [ ||  || ] | inherit
-border-width: [ | thin | medium | thick]{1,4} | inherit
-border-style: [solid | dashed | dotted | ...]{1,4} |inherit
-border-colro: [ | transparent]{1,4} | inherit
-```
-
-NOTE：`border-color` 默认为元素字体颜色。
-
-##### border-radius
-
-![](../img/B/border-radius-sample1.png)
-
-```
-/* 水平半径/垂直半径 */
-border-radius: [  |  ]{1,4} [ / [  |  ]{1,4} ]?
-```
-
-NOTE：四个角的分解属性由左上角顺时针附值。
-
-##### overflow
-
-![](../img/O/overflow-sample.png)
-
-`overflow: visible | hidden | scroll | auto`
-
-NOTE：默认属性为 `visible`。使用 `overflow-x` 与 `overflow-y` 单独的设置水平和垂直方向的滚动条。
-
-##### box-sizing
-
-![](../img/B/box-sizing.png)
-
-![](../img/B/box-sizing1.png)
-
-`box-sizing: content-box | border-box | inherit`
-
-- `content-box` = 内容盒子宽高 + 填充（`Padding`）+ 边框宽（`border-width`）
-- `border-box` = 内容盒子宽高
-
-##### box-shadow
-
-![](../img/B/box-shadow.png)
-
-`box-shadown: none | [inset? && [   ? ? ? ] ]#`
-
-```html
-box-shadow: 4px  6px   3px  0px red;
-             |    |     |    |
-          水平偏移|     |    |
-               垂直偏移 |    |
-                    模糊半径 |
-                          阴影大小
-```
-
-NOTE：水平与垂直偏移可以为负值即相反方向偏移。颜色默认为文字颜色。阴影不占据空间，仅为修饰效果。
-
-##### outline
-
-```
-outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
-outline-width:  | thin | medium | thick | inherit
-outline-style: solid | dashed | dotted | ... | inherit
-outline-color:  | invert | inherit
-/* invert 与当前颜色取反色 */
-```
-
-NOTE：`outline` 与 `border` 相似但无法分别设置四个方向的属性。`outline` 并不占据空间，而 `border` 占据空间，且显示位于 `border` 以外。
-
-#### TRBL
-
-![](../img/T/TRBL.png)
-
-![](../img/B/border-radius-sample.png)
-
-TRBL (Top, Right, Bottom, Left) 即为顺时针从顶部开始。具有四个方向的属性都可以通过 `*-top` `*-right` `*-bottom` 与 `*-left` 单独对其进行设置。
-
-#### 值缩写
-
-下面的值缩写以 `padding` 为例。
-
-> 对面相等，后者省略；四面相等，只设一个。
-
-```html
-/*      四面值 */
-padding: 20px;
-padding: 20px 20px 20px 20px;
-
-/*      上下值 右左值 */
-padding: 20px   10px;
-padding: 20px 10px 20px 10px;
-
-/*       上值 右左值 下值 */
-padding: 20px 10px   30px;
-padding: 20px 10px 30px 10px;
-```
-
-
-### 背景
-
-#### background-color
-
-```
-background-color: 
-background-color: #f00;
-background-color: rgba(255, 0, 0, 0.5);
-background-color: transparent; /* 默认值 */
-```
-
-#### background-image
-
-```
-background-image: [, ]*
-/*  =  | none */
-background-image: url("../image/pic.png");
-background-image: url("../image/pic.png0"), url("../image/pic1.png");
-/* 多张背景图时，先引入的图片在上一层后引入则在下一层 */
-```
-
-NOTE：当`background-color` 与 `background-image` 共存时，背景颜色永远在最底层（于背景图片之下）。
-
-#### background-repeat
-
-`background-repeat` 需与背景图片数量一致。
-
-```
-background-repeat: [,  = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
-
-/*                   X 轴     Y 轴 */
-background-repeat: no-repeat repeat;
-```
-
-- `space` 平铺并在水平和垂直留有空隙，空隙的大小为图片均匀分布后完整覆盖显示区域的宽高
-- `round` 不留空隙平铺且覆盖显示区域，图标会被缩放以达到覆盖效果（缩放不一定等比）
-
-#### background-attachment
-
-当页面内容超过显示区域时，使用 `local` 使背景图片同页面内容一同滚动。
-
-```
-background-attachment: [, ]*
- = scroll | fixed | local
-```
-
-#### background-position
-
-```
-background-position: [, ]*
- = [left|center|right|top|bottom||]|[left|center|right|top|bottom||] [left|center|right|top|bottom||] | [center |[left|right][|]?]&&[center |[left|right][|]?]
-
-/* 默认位置为 */
-background-position: 0 0;
-
-/* percentage 是容器与图片的百分比重合之处*/
-background-position: 20% 50%;
-
-/* 等同效果 */
-background-position: 50% 50%;
-background-position: center center;
-
-background-position: 0 0;
-background-position: left top;
-
-background-position: 100% 100%;
-background-position: right bottom;
-
-/* 四个值时方向只为参照物 */
-background-position: right 10px top 20px;
-```
-
-![](../img/B/background-position.jpg)
-
-##### Sprite 的使用
-
-```html
-background-image: url(sprite.png)
-background-repeat: no-repeat;
-background-positon: 0 -100px
-```
-
-使用位置为负值将图片偏移使需要的图片位置上移并显示正确的图案。
-
-#### linear-gradient
-
-```
-linear-gradient()
-[[ | to [, ]+
- = [left | right] || [top | bottom]
- =  [ | ]?
-
-background-image: linear-gradient(red, blue);
-background-image: linear-gradient(to top, red, blue);
-background-image: linear-gradient(to right bottom, red, blue);
-background-image: linear-gradient(0deg, red, blue);
-background-image: linear-gradient(45deg, red, blue);
-background-image: linear-gradient(red, green, blue);
-background-image: linear-gradient(red, green 20%, blue);
-```
-
-![](../img/L/linear-gradient.jpg)
-
-#### radial-gradient
-
-```
-radial-gradient(   [ circle ||  ] [ at  ]? , | [ ellipse || [ |  ]{2}] [ at  ]? , | [ [ circle | ellipse ] ||  ] [ at  ]? , | at  ,  [ ,  ]+ )
-
- = closest-corner | closest-side | farthest-corner | farthest-side
- =  [  |  ]?
-
-background-image: radial-gradient(cloest-side, red, blue);
-background-image: radial-gradient(circle, red, blue);
-background-image: radial-gradient(circle 100px, red, blue);
-background-image: radial-gradient(red, blue);
-background-image: radial-gradient(100px 50px, red, blue);
-background-image: radial-gradient(100px 50px at 0 0, red, blue);
-background-image: radial-gradient(red, green 20%, blue);
-```
-
-![](../img/R/radial-gradient.jpg)
-
-#### repeat-*-gradient
-
-```
-background-image: repeating-linear-gradient(red, blue 20px, red 40px);
-background-image: repeating-radial-gradient(red, blue 20px, red 40px);
-```
-
-![](../img/R/repeating-gradient.jpg)
-
-#### background-origin
-
-**案例模型**
-
-![](../img/B/background-box-model.png)
-
-决定背景 (0,0) 坐标与 100% 坐标的区域。默认值为 `padding-box`。
-
-```
-[, ]*
- = border-box | padding-box | content-box
-
-background-image: url(red.png);
-background-repeat: no-repeat;
-
-background-origin: padding-box;
-background-origin: border-box;
-background-origin: content-box;
-```
-
-![](../img/B/background-origin.jpg)
-
-#### background-clip
-
-裁剪背景，默认值为`border-box`。
-
-```
-[, ]*
- = border-box | padding-box | content-box
-
-background-image: url(red.png);
-background-repeat: no-repeat;
-
-background-clip: border-box;
-background-clip: padding-box;
-background-clip: content-box;
-```
-
-![](../img/B/background-clip.jpg)
-
-#### background-size
-
-```
-[, ]*
- = [ |  | auto] {1, 2} | cover | contain
-
-background-image: url(red.png);
-background-repeat: no-repeat;
-background-position: 50% 50%;
-
-background-size: auto;
-background-size: 20px 20px;
-/* % 参照物为容器*/
-background-size: 50% 50%;
-/* 尽可能小，但宽度与高度不小过容器（充满容器） */
-background-size: cover;
-/* 尽可能大，但宽度与高度不超过容器（最大完全显示）*/
-background-size: contain;
-```
-
-![](../img/B/background-size.jpg)
-
-#### background shorthand
-
-```
-[
- =  ||  [/ ]? ||  ||  ||  || 
-
-/* 两个  第一个为 background-origin */
-/* 两个  第二个为 background-clip */
-/* 只出现一个  则即是 background-origin 也是 background-clip */
-
- =  || <'background-color'>
-
-background: url(red.png) 0 0/20px 20px no-repeat, url(blue.png) 50% 50%/contain no-repeat content-box green;
-```
-
-![](../img/B/background-shorthand.png)
diff --git a/WebCreation/WebCreation-CSS-2.md b/WebCreation/WebCreation-CSS-2.md
deleted file mode 100644
index 3103125..0000000
--- a/WebCreation/WebCreation-CSS-2.md
+++ /dev/null
@@ -1,856 +0,0 @@
-
-
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
-- [布局](#%E5%B8%83%E5%B1%80)
-  - [display](#display)
-    - [display:block](#displayblock)
-    - [display:inline](#displayinline)
-    - [display:inline-block](#displayinline-block)
-    - [display:none](#displaynone)
-  - [position](#position)
-    - [position:relative](#positionrelative)
-    - [position:absolute](#positionabsolute)
-    - [position:fixed](#positionfixed)
-    - [top/right/bottom/left](#toprightbottomleft)
-    - [z-index](#z-index)
-      - [z-index 栈](#z-index-%E6%A0%88)
-  - [float](#float)
-    - [clear](#clear)
-  - [flex](#flex)
-    - [flex 方向](#flex-%E6%96%B9%E5%90%91)
-      - [flex-direction](#flex-direction)
-      - [flex-wrap](#flex-wrap)
-      - [flex-flow](#flex-flow)
-      - [order](#order)
-    - [flex 弹性](#flex-%E5%BC%B9%E6%80%A7)
-      - [flex-basis](#flex-basis)
-      - [flex-grow](#flex-grow)
-      - [flex-shrink](#flex-shrink)
-      - [flex](#flex-1)
-    - [flex 对齐](#flex-%E5%AF%B9%E9%BD%90)
-      - [justify-content](#justify-content)
-      - [align-items](#align-items)
-      - [align-self](#align-self)
-      - [align-content](#align-content)
-- [变形](#%E5%8F%98%E5%BD%A2)
-  - [2D 变形](#2d-%E5%8F%98%E5%BD%A2)
-    - [transform](#transform)
-      - [rotate()](#rotate)
-      - [transform-origin](#transform-origin)
-      - [translate()](#translate)
-      - [scale()](#scale)
-      - [skew()](#skew)
-  - [3D 变形](#3d-%E5%8F%98%E5%BD%A2)
-    - [rotateY()](#rotatey)
-    - [perspective](#perspective)
-    - [perspective-origin](#perspective-origin)
-    - [translate3d()](#translate3d)
-    - [scale3d()](#scale3d)
-    - [rotate3d()](#rotate3d)
-    - [transform-style](#transform-style)
-    - [backface-visibility](#backface-visibility)
-- [动画](#%E5%8A%A8%E7%94%BB)
-  - [transition](#transition)
-    - [transition-property](#transition-property)
-    - [transition-duration](#transition-duration)
-    - [transition-delay](#transition-delay)
-    - [transition-timing-function](#transition-timing-function)
-  - [animation](#animation)
-    - [animation-name](#animation-name)
-    - [animation-duration](#animation-duration)
-    - [animation-timing-function](#animation-timing-function)
-    - [animation-iteration-count](#animation-iteration-count)
-    - [animation-direction](#animation-direction)
-    - [animation-play-state](#animation-play-state)
-    - [animation-delay](#animation-delay)
-    - [animation-fill-mode](#animation-fill-mode)
-    - [@keyframes](#@keyframes)
-
-
-
-
-### 布局
-
-Firefox 布局可视化 **Gecko Reflow Visualisation**，布局是指浏览器将元素以正确的大小摆放在正确的位置上。
-
-#### display
-
-设置元素的显示方式
-
-|display|默认宽度|可设置宽高|起始位置|
-|-------|--------|----------|--------|
-|block|父元素宽度|是|换行|
-|inline|内容宽度|否|同行|
-|inline-block|内容宽度|是|同行|
-
-##### display:block
-
-- 默认宽高为父元素宽高
-- 可设置宽高
-- 换行显示
-
-##### display:inline
-
-- 默认宽度为内容宽度
-- 不可设置宽高
-- 同行显示（元素内部可换行）
-
-##### display:inline-block
-
-- 默认宽度为内容宽度
-- 可设置宽高
-- 同行显示
-- 整块换行
-
-##### display:none
-
-- 设置元素不显示
-
-`display:none` 与 `visibility:hidden` 的区别为 `display:none` 不显示且不占位，但 `visibility:hidden` 不显示但占位。
-
-![](../img/G/gecko-reflow-visualisation.gif)
-
-#### position
-
-`position` 用于设置定位的方式与`top` `right` `bottom` `left` `z-index` 则用于设置参照物位置（必须配合定位一同使用）。
-
-```
-position: static | relative | absolute | fixed
-/* 默认值为 static */
-
-```
-
-##### position:relative
-
-- 相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列。
-- 参照物为元素本身的位置。
-
-NOTE：最常用的目的为改变元素层级和设置为绝对定位的参照物。
-
-![](../img/P/position-relative.png)
-
-##### position:absolute
-
-- 默认宽度为内容宽度
-- 脱离文档流
-- 参照物为第一个定位祖先或根元素（HTML 元素）
-
-![](../img/P/position-absolute.png)
-
-##### position:fixed
-
-- 默认宽度为内容宽度
-- 脱离文档流
-- 参照物为视窗
-
-NOTE：宽高的100%的参照依然为视窗（例：网页遮罩效果）
-
-![](../img/P/position-fixed.png)
-
-##### top/right/bottom/left
-
-![](../img/L/layout-position.png)
-
-其用于设置元素边缘与参照物边缘的距离，且设置的值可为负值。在同时设置相对方向时，元素将被拉伸。
-
-##### z-index
-
-其用于设置 Z 轴上得排序，默认值为 0 但可设置为负值。（如不做设置，则按照文档流的顺序排列。后面的元素将置于前面的元素之上）
-
-![](../img/L/layouy-position-zindex.png)
-
-###### z-index 栈
-
-父类容器的 `z-index` 优于子类 `z-index` 如图
-
-![](../img/L/layout-position-zindex-stack.jpg)
-
-#### float
-
-其可实现块级元素同行显示并存在于文档流之中。
-
-```
-float: left | right | none | inherit
-```
-
-- 默认宽度为内容宽度
-- 脱离文档流（会被父元素边界阻挡与`position`脱离文档流的方式不同）
-- 指的方向一直移动
-
-![](../img/F/float-right.png)
-
-**float 元素在同一文档流中**，当同时进行 `float` 时它们会按照文档流中的顺序排列。(当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度)
-
-![](../img/F/float-right-all.jpg)
-
-**float 元素是半脱离文档流的**，对元素是脱离文档流，但对于内容则是在文档流之中的（既元素重叠但内容不重叠）。
-
-![](../img/F/float-half-off.png)
-
-##### clear
-
-```
-clear: both | left | right | none | inherit
-```
-
-- 应用于后续元素
-- 应用于块级元素（block）
-
-**使用方法**：
-
-1. 浮动后续空白元素 `.emptyDiv {clear: both}`
-1. clearfix 于父元素
-
-```
-/* clearfix */
-.clearfix:after {
-   content: "."; /* Older browser do not support empty content */
-   visibility: hidden;
-   display: block;
-   height: 0;
-   clear: both;
-}
-.clearfix {zoom: 1;} /* 针对 IE 不支持 :after */
-```
-
-#### flex
-
-![](../img/F/flex-container-and-item.jpg)
-
-弹性布局可用于多行自适应，多列自适应，间距自适应和任意对齐。
-
-**创建 flex container**
-
-```
-display: flex
-/* 弹性容器内的均为弹性元素*/
-```
-
-**flex item**
-
-只有弹性容器在文档流中的子元素才属于弹性元素。
-
-```
-

-  
Block Element

-  
-  Inline Element
-  
-  
Absolute Block Element

-  
-

-```
-
-##### flex 方向
-
-###### flex-direction
-
-```
-
-flex-direction: row | row-reverse | column | column-reverse
-```
-
-![](../img/F/flex-direciton.png)
-
-###### flex-wrap
-
-```
-
-flex-wrap: nowrap | wrap | wrap-reverse
-```
-
-![](../img/F/flex-wrap.png)
-
-###### flex-flow
-
-`flex-flow` 为 `flex-wrap` 与 `flex-direction` 的简写，建议使用此属性（避免同时使用两个属性来修改）。
-
-```
-flex-flow: <'flex-direction'> || <'flex-wrap'>
-```
-
-![](../img/F/flex-flow.png)
-
-###### order
-
-`order` 的值为相对的（同被设置和未被设置的值相比较），当均为设置时默认值为 0 则按照文档流中的顺序排列。
-
-```
-order: 
-
-```
-
-![](../img/F/flex-order0.png)
-![](../img/F/flex-order1.png)
-
-##### flex 弹性
-
-###### flex-basis
-
-其用于设置 `flex-item` 的初始宽高（并作为弹性的基础）。如果 `flex-direction` 是以 `row` 排列则设置**宽**，如以 `column` 排列则设置**高**。
-
-```
-flex-basis: main-size | 
-```
-
-###### flex-grow
-
-伸展因子，其为弹性布局中最重要的元素之一，`flex-grow` 设置元素可用空余空间的比例。`flex-container` 先安装宽度（`flex-basis`）进行布局，如果有空余空间就按照 `flex-grow` 中的比例进行分配。
-
-**Width/Height = flex-basis + flex-grow/sum(flow-grow) * remain**
-
-```
-flex-grow: 
-initial: 0
-
-```
-
-![](../img/F/flex-grow0.png)
-![](../img/F/flex-grow1.png)
-![](../img/F/flex-grow2.png)
-
-###### flex-shrink
-
-收缩因子，用于分配超出的负空间如何从可用空间中进行缩减。
-
-```
-flex-shrink: 
-initial: 1
-
-```
-
-**Width/Height = flex-basis + flow-shrink/sum(flow-shrink) * remain**
-
-remain 为负值，既超出的区域。
-
-![](../img/F/flex-shrink.png)
-
-###### flex
-
-其为 `flex-grow` `flex-shrink` `flex-basis` 的值缩写。
-
-```
-flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
-initial: 0 1 main-size
-```
-
-##### flex 对齐
-
-###### justify-content
-
-其用于设置主轴（main-axis）上的对其方式。弹性元素根据主轴（横向和纵向均可）定位所以不可使用 `left` 与 `right` 因为位置为相对的。（行为相似的属性有 `text-align`）
-
-```
-justify-content: flex-start | flex-end | center | space-between | space-around
-
-```
-
-![](../img/F/flex-justify-content.png)
-
-###### align-items
-
-其用于设置副轴（cross-axis）上的对其方式。（行为相似的属性有 `vertical-align`）
-
-```
-align-items: flex-start | flex-end | center | baseline | stretch
-
-```
-
-![](../img/F/flex-align-items.png)
-
-###### align-self
-
-其用于设置单个 `flex-item` 在 cross-axis 方向上的对其方式。
-
-```
-align-self: auto | flex-start | flex-end | center | baseline | stretch
-
-```
-
-![](../img/F/flex-align-self.png)
-
-###### align-content
-
-其用于设置 cross-axis 方向上的对其方式。
-
-```
-align-content:flex-start | flex-end | center | space-between | space-around | stretch
-
-```
-
-![](../img/F/flex-align-content.png)
-
-### 变形
-
-#### 2D 变形
-
-##### transform
-
-`transform` 中可以写一个或多个方法。
-
-```
-trnasform: none | +
-transform: none
-
-transform: +
-
-transform: translate(50%) rotate(45deg);
-transform: rotate(45deg) transform(50%)
-
-```
-
-![](../img/T/transform-transform-function.png)
-
-###### rotate()
-
-```
-rotate()
-
-rotate(45deg);
-
-rotate(-60deg);
-
-```
-
-![](../img/T/transform-rotate.png)
-
-###### transform-origin
-
-其用于设置原点的位置（默认位置为元素中心）第一值为 X 方向，第二值为 Y 方向， 第三值为 Z 方向。（当值空出未写的情况下默认为 50%）
-
-```
-transform-origin: [  |  | left | center | right | top | bottom] | [ [  |  | left | center | right ] && [  |  | top | center | bottom ] ] ?
-
-
-
-transform-origin: 50% 50%;
-transform-origin: 0 0;
-transform-origin: right 50px 20px;
-transform-origin: top right 20px;
-```
-
-![](../img/T/transform-origin.png)
-
-###### translate()
-
-移动方法，参数分别代表 X 与 Y 轴的移动（偏移值均可为负值）。
-
-```
-translate([, ]?)
-
-
-translationX()
-translationY()
-
-transform: translate(50px);
-transform: translate(50px, 20%);
-
-transform: translate(-50px);
-transform: translate(20%);
-```
-
-![](../img/T/transform-traslate.png)
-
-###### scale()
-
-缩放方法，参数分别代表 X 与 Y 轴的缩放（缩放值均可为小数）。当第二值忽略时，默认设置为等同第一值。
-
-```
-scale( [, ]?)
-
-scaleX()
-scaleY()
-
-
-transform: scale(1.2);
-
-transform: scale(1, 1.2);
-
-transform: scaleX(1.2);
-
-transform: scaleY(1.2);
-```
-
-![](../img/T/transform-scale.png)
-
-###### skew()
-
-其为倾斜的方法。第一值为 Y 轴往 X 方向倾斜（逆时针），第二值为 X 轴往 Y 方向倾斜（顺时针）。（倾斜值可为负值）
-
-```
-skew([, ]?)
-
-skewX()
-skewY()
-
-transform: skew(30deg);
-transform: skew(30deg, 30deg);
-transform: skewX(30deg);
-transform: skewY(30deg);
-```
-
-![](../img/T/transform-skew.png)
-
-#### 3D 变形
-
-##### rotateY()
-
-3D 空间旋转。
-
-```
-transform: rotateY()
-```
-
-##### perspective
-
-其用于设置图片 Y 轴旋转后的透视效果。`` 可以理解为人眼与元素之间的距离，越紧则效果越明显。
-
-```
-perspective: none | 
-
-perspective: none;
-perspective: 2000px;
-perspective: 500px;
-```
-
-![](../img/T/transform-perspective.png)
-
-##### perspective-origin
-
-其为设定透视的角度（透视位置均可设定为负值）。
-
-```
-perspective-origin: [  |  | left | center | right | top | bottom] | [ [  |  | left | center | right ] && [  |  | top | center | bottom ] ]
-
-perspective-origin: 50% 50%
-
-perspective-origin: left bottom;
-perspective-origin: 50% -800px;
-perspective-origin: right;
-```
-
-![](../img/T/transform-perspective-origin.png)
-
-##### translate3d()
-
-```
-translate3d(, , )
-
-translateX()
-translateY()
-translateZ()
-
-transform: translate3d(10px, 20%, 50px);
-
-transform: translateX(10px);
-transform: translateY(20%);
-transform: translateZ(-100px);
-```
-
-![](../img/T/transform-translate3d.png)
-
-##### scale3d()
-
-```
-scale3d(, , )
-
-scaleX()
-scaleY()
-scaleZ()
-
-transform: scale3d(1.2, 1.2, 1);
-transform: scale3d(1, 1.2, 1);
-transform: scale3d(1.2, 1, 1);
-transform: scaleZ(5);
-
-```
-
-![](../img/T/transform-scale3d.png)
-
-##### rotate3d()
-
-取 X Y Z 三轴上的一点并于坐标原点连线，以连线为轴进行旋转（逆时针）。
-
-```
-rotate3d(, , , )
-
-rotateX()
-rotateY()
-rotateZ()
-
-transform: rotate3d(1, 0, 0, 45deg);
-
-transform: rotate3d(0, 1, 0, 45deg);
-
-transform: rotate3d(0, 0, 1, 45deg);
-
-transform: rotate3d(1, 1, 1, 45deg);
-```
-
-![](../img/T/transform-rotate3d.png)
-
-##### transform-style
-
-其用于设置保留内部的 3D 空间，原因是一个元素进行`transform`之后内部默认为`flat`。
-
-```
-transform-style: flat | perserve-3d
-
-
-
-transform-style: flat;
-transform-style: preserve-3d;
-```
-
-![](../img/T/transform-transform-style.png)
-
-##### backface-visibility
-
-其用于设置背面不可见。
-
-```
-backface-visibility: visible | hidden
-
-backface-visibility: visible;
-backface-visibility: hidden;
-```
-
-![](../img/T/transform-backface-visibility.png)
-
-### 动画
-
-#### transition
-
-其为众多 `` 的值缩写。（当两个时间同时出现是，第一个时间为动画长度，第二个时间为动画延时）
-
-```
-transition:  [',' ]*
-
- = [none | ] ||