incubator-weex git commit: + [doc] add documentation for transform.

[ta...@apache.org]

Repository: incubator-weex
Updated Branches:
  refs/heads/dev b8d8dca89 -> 8483b3038


+ [doc] add documentation for transform.


Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/8483b303
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/8483b303
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/8483b303

Branch: refs/heads/dev
Commit: 8483b303845bbb196ef8e765ce216c8daf07a215
Parents: b8d8dca
Author: yinfeng <cx...@apache.org>
Authored: Thu May 18 20:02:38 2017 +0800
Committer: yinfeng <cx...@apache.org>
Committed: Thu May 18 20:02:38 2017 +0800

----------------------------------------------------------------------
 doc/source/cn/references/common-style.md | 44 +++++++++++++++++++++++++--
 doc/source/references/common-style.md    | 38 +++++++++++++++++++++++
 2 files changed, 79 insertions(+), 3 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8483b303/doc/source/cn/references/common-style.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/common-style.md b/doc/source/cn/references/common-style.md
index f3e84f7..8ba1a8a 100644
--- a/doc/source/cn/references/common-style.md
+++ b/doc/source/cn/references/common-style.md
@@ -126,8 +126,8 @@ Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容
 
   定义了 flex 容器中 flex 成员项的排列方向。可选值为 `row` | `column`，默认值为 `column`
 
-   - `column`：从上到下排列。
-   - `row`：从左到右排列。
+  - `column`：从上到下排列。
+  - `row`：从左到右排列。
 
 - `justify-content`：
 
@@ -140,7 +140,7 @@ Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容
 
   ![justify-content @400*](./images/css-flexbox-justify.svg)
 
--  `align-items`：
+- `align-items`：
 
   定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 `stretch` | `flex-start` | `center` | `flex-end`，默认值为 `stretch`。
 
@@ -301,6 +301,44 @@ Weex 支持 `position` 定位，用法与 CSS position 类似。为元素设置
 </style>
 ```
 
+## transform
+
+transform 属性向元素应用 2D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
+
+目前支持的 transform 声明格式:
+
+- translate( <number/percentage> [, <number/percentage>]?)
+- translateX( <number/percentage> )
+- translateY( <number/percentage> )
+- scale( <number>)
+- scaleX( <number> )
+- scaleY( <number> )
+- rotate( <angle/degree> )
+- transform-origin: number/percentage/keyword(top/left/right/bottom)
+
+### 示例
+
+```HTML
+<template>
+  <div class="wrapper">
+    <div class="transform">
+     <text class="title">Transformed element</text>
+    </div>
+  </div>
+</template>
+
+<style>
+  .transform {
+    align-items: center; 
+    transform: translate(150px,200px) rotate(20deg);
+    transform-origin: 0 -250px;
+    border-color:red;
+    border-width:2px;
+  }
+  .title {font-size: 48px;}
+</style>
+```
+
 ## 伪类 <span class="api-version">v0.9.5+</span>
 
 Weex 支持四种伪类：`active`, `focus`, `disabled`, `enabled`

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8483b303/doc/source/references/common-style.md
----------------------------------------------------------------------
diff --git a/doc/source/references/common-style.md b/doc/source/references/common-style.md
index e69d573..4250fec 100644
--- a/doc/source/references/common-style.md
+++ b/doc/source/references/common-style.md
@@ -190,6 +190,44 @@ we can use properties below to control placement of weex tag
 </template>
 ```
 
+## transform
+
+The CSS **transform** property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated and scaled.
+
+Currently supported format:
+
+* translate( <number/percentage> [, <number/percentage>]?)
+* translateX( <number/percentage> )
+* translateY( <number/percentage> )
+* scale( <number>)
+* scaleX( <number> )
+* scaleY( <number> )
+* rotate( <angle/degree> )
+* transform-origin: number/percentage/keyword(top/left/right/bottom)
+
+### Example
+
+```HTML
+<template>
+  <div class="wrapper">
+    <div class="transform">
+     <text class="title">Transformed element</text>
+    </div>
+  </div>
+</template>
+
+<style>
+  .transform {
+    align-items: center; 
+    transform: translate(150px,200px) rotate(20deg);
+    transform-origin: 0 -250px;
+    border-color:red;
+    border-width:2px;
+  }
+  .title {font-size: 48px;}
+</style>
+```
+
 ## Pseudo class <span class="api-version">v0.9.5+</span>
 
 Weex support four pseudo-classes: `active`, `focus`, `disabled`, `enabled`