fix(zh-tw): update the broken live sample (#12830)

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,23 +49,25 @@ transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
 /* Global values */
 transform: inherit;
 transform: initial;
+transform: revert;
+transform: revert-layer;
 transform: unset;
 ```
 
 `transform` 屬性可能被指定為關鍵字值 [`none`](#none) 或著一或多個 [`<transform-function>`](#transform-function) 值。
 
 ### 值
 
-- ">{{cssxref("&lt;transform-function&gt;")}}
-  - : 可使用一個或多個 [CSS transform functions](/zh-TW/docs/Web/CSS/transform-function)。複合的 transforms 會由左至右的順序來套用。
+- {{cssxref("&lt;transform-function&gt;")}}
+  - : 可使用一個或多個 [CSS transform 函數](/zh-TW/docs/Web/CSS/transform-function)。複合的 transform 會由左至右的順序來套用。
 - `none`
   - : 設定為沒有套用任何 transform。
 
 ## 可使用性問題
 
 改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。
 
-另外也可考慮使用{{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
-<p>Transformed element</p>
+<div>Transformed element</div>
 ```
 
-### 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("&lt;transform-function&gt;")}} 的更多範例。
+請參考[使用 CSS transform](/zh-TW/docs/Web/Guide/CSS/Using_CSS_transforms) 以及 {{cssxref("&lt;transform-function&gt;")}} 的更多範例。
 
 ## 規範
 
 {{Specifications}}
 
-{{cssinfo}}
-
 ## 瀏覽器相容性
 
 {{Compat}}
 
 ## 參見
 
-- [使用 CSS transforms](/zh-TW/docs/CSS/Using_CSS_transforms)
+- [使用 CSS transform](/zh-TW/docs/CSS/Using_CSS_transforms)
 - {{cssxref("&lt;transform-function&gt;")}} data type
 - A cross-browser 2D [transform plugin for jQuery](https://louisremi.github.io/jquery.transform.js/)