CSS - Translate 屬性：風格化地移動元素
你好，未來的 CSS 巫師們！今天，我們將踏上一段令人興奮的旅程，進入 CSS 變換的世界，特別聚焦於 translate 屬性。作為你們親切的鄰居電腦老師，我在這裡指引你們穿越這個神奇的領域，我們可以在網頁上自由移動元素，而且毫不費力。所以，系好安全帶，讓我們一起潛入水中！
CSS Translate 屬性是什麼？
在開始移動元素之前，讓我們先了解 translate 屬性究竟是如何工作的。簡單來說，它允許我們移動元素當前的位置，而不影響其他元素的佈局。這就像有一根魔法棒，可以抬起並移動你的網頁上的元素！
真實世界的比喻
想像你正在一個房間裡佈置家具。translate 屬性就像拿起一把椅子並把它移到另一個地方，而不擾動其他任何東西。酷炫吧？
可能的值
translate 屬性可以接受各種類型的值。讓我們來分析一下：
| 值類型 | 描述 | 示例 |
|---|---|---|
| 長度 | 如 px、em、rem 等特定單位 | translate(50px, 20px) |
| 百分比 | 相對於元素的大小 | translate(50%, 20%) |
| 鍵詞 | 如 none 的特殊值 |
translate(none) |
应用範围
translate 屬性可以應用於任何可以被變換的元素。這包括大多數 HTML 元素，但特別有用於：
-
<div>容器 - 圖像 (
<img>) - 按鈕 (
<button>) - 文本元素 (
<p>,<span>, 等)
DOM 語法
當使用 JavaScript 時，你可能需要訪問或修改 translate 屬性。以下是如何操作的：
// 獲取 translate 值
let currentTranslate = element.style.translate;
// 設置 translate 值
element.style.translate = "50px 20px";現在，讓我們來看看一些實際的例子！
CSS Translate - 未設定翻譯
有時候，你可能想要明確指出一個元素不應該被翻譯。這樣做：
.no-move {
translate: none;
}這就像告訴你的元素，“老兄，別動！你不需要移動。”
CSS Translate - 使用長度-百分比在 X 軸上翻譯
讓我們從一個簡單的水平移動開始：
.move-right {
translate: 100px;
}這會將我們的元素向右移動 100 像素。這就像給你的元素一個小小的推動，說，“過去一點兒，好嗎？”
CSS Translate - 使用長度-百分比在 Y 軸上翻譯
現在，讓我們上下移動：
.move-down {
translate: 0 50px;
}這會將我們的元素向下移動 50 像素。第一個值（0）表示沒有水平移動，第二個值（50px）表示向下移動 50 像素。
CSS Translate - 使用長度-百分比在 Z 軸上翻譯
當我們開始在 3D 空間中移動時，事情變得非常有趣！以下是如何將元素“朝向”或“遠離”觀眾移動：
.move-closer {
translate: 0 0 -50px;
}這會將元素向觀眾移動 50 像素。這就像元素從屏幕中脫穎而出！
CSS Translate - 使用長度-百分比在 X 和 Y 軸上翻譯
讓我們結合水平和垂直移動：
.move-diagonally {
translate: 100px 100px;
}這會將我們的元素向右移動 100 像素，並向下移動 100 像素。這就像告訴你的元素，“去角落！”
CSS Translate - 使用長度-百分比在 Y 和 Z 軸上翻譯
垂直和深入移動：
.float-down {
translate: 0 50px 20px;
}這會將元素向下移動 50 像素，並從觀眾處移開 20 像素。這創造了一個微妙的 3D 效果！
CSS Translate - 使用長度-百分比在 X 和 Z 軸上翻譯
讓我們結合水平移動和深度：
.slide-away {
translate: 100px 0 50px;
}這會將元素向右移動 100 像素，並從觀眾處移開 50 像素。這就像元素滑向一邊並進入遠處。
CSS Translate - 使用長度-百分比在 X、Y 和 Z 軸上翻譯
最後，讓我們在所有三個維度上移動：
.move-everywhere {
translate: 100px 50px 25px;
}這會將我們的元素向右移動 100 像素，向下移動 50 像素，並從觀眾處移開 25 像素。這就像給你的元素完全的自由在 3D 空間中漫步！
結論
好了，各位！我們已經穿越了 CSS 翻譯的奇妙世界。記住，能力越強，責任越大。明智地使用這些翻譯，創建有吸引力和動感的網頁。
在我讓你們離開之前，這裡有一個來自你們親切的鄰居電腦老師的小提示：總是在不同的設備和瀏覽器上測試你的翻譯。在你的電腦上看起來很完美的東西，在別人的手機上可能會有些偏誤。
現在，去把你的網頁元素翻譯到新的高度（和寬度，和深度）吧！快樂編程！
Credits: Image by storyset