diff --git a/files/zh-tw/web/css/transform/index.md b/files/zh-tw/web/css/transform/index.md
index 2e24b7ecffbfb1..94a2e7a0d62564 100644
--- a/files/zh-tw/web/css/transform/index.md
+++ b/files/zh-tw/web/css/transform/index.md
@@ -11,20 +11,20 @@ slug: Web/CSS/transform
如果這個屬性的值不是 `none`，將會建立一個 [stacking context](/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)。在這個情況下，此元素將被其所包含的 `position: fixed` 元素當成一個 containing block。
-> **警告：** 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了[視覺格式化模型](/zh-TW/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [table-column boxes](/zh-TW/docs/Web/HTML/Element/col) 和 [table-colunm-group boxes](/zh-TW/docs/Web/HTML/Element/colgroup)。
+> **警告：** 只有可以變形的元素可以被變形，這包括所有被 CSS box model 掌管輸出的元素，除了[視覺格式化模型](/zh-TW/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes), [table-column box](/zh-TW/docs/Web/HTML/Element/col) 和 [table-colunm-group box](/zh-TW/docs/Web/HTML/Element/colgroup)。
## 語法
-```plain
+```css
/* Keyword values */
transform: none;
/* Function values */
-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
-transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
@@ -49,6 +49,8 @@ transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* Global values */
transform: inherit;
transform: initial;
+transform: revert;
+transform: revert-layer;
transform: unset;
```
@@ -56,8 +58,8 @@ transform: unset;
### 值
-- ">{{cssxref("<transform-function>")}}
- - : 可使用一個或多個 [CSS transform functions](/zh-TW/docs/Web/CSS/transform-function)。複合的 transforms 會由左至右的順序來套用。
+- {{cssxref("<transform-function>")}}
+ - : 可使用一個或多個 [CSS transform 函數](/zh-TW/docs/Web/CSS/transform-function)。複合的 transform 會由左至右的順序來套用。
- `none`
- : 設定為沒有套用任何 transform。
@@ -65,7 +67,7 @@ transform: unset;
改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。
-另外也可考慮使用{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的[媒體詢問](/zh-TW/docs/Web/CSS/Media_Queries)，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。
+另外也可考慮使用 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的[媒體詢問](/zh-TW/docs/Web/CSS/Media_Queries)，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。
瞭解更多:
@@ -84,42 +86,41 @@ transform: unset;
### 平移、旋轉元素
-### HTML
+#### HTML
```html
-Transformed element
+Transformed element
```
-### CSS
+#### CSS
```css
-p {
+div {
border: solid red;
- transform: translate(100px) rotate(20deg);
- transform-origin: 0 -250px;
+ transform: translate(30px, 20px) rotate(20deg);
+ width: 140px;
+ height: 60px;
}
```
-### 結果
+#### 結果
{{EmbedLiveSample("平移、旋轉元素", "400", "160")}}
### 更多範例
-請參考[使用 CSS transforms](/zh-TW/docs/Web/Guide/CSS/Using_CSS_transforms) 以及 {{cssxref("<transform-function>")}} 的更多範例。
+請參考[使用 CSS transform](/zh-TW/docs/Web/Guide/CSS/Using_CSS_transforms) 以及 {{cssxref("<transform-function>")}} 的更多範例。
## 規範
{{Specifications}}
-{{cssinfo}}
-
## 瀏覽器相容性
{{Compat}}
## 參見
-- [使用 CSS transforms](/zh-TW/docs/CSS/Using_CSS_transforms)
+- [使用 CSS transform](/zh-TW/docs/CSS/Using_CSS_transforms)
- {{cssxref("<transform-function>")}} data type
- A cross-browser 2D [transform plugin for jQuery](https://louisremi.github.io/jquery.transform.js/)