日本語訳
こんにちは、未来の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）は水平方向に移動しないことを意味し、2番目の値（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軸方向の長さ-百分率を使用した翻訳
最後に、3つの方向すべてに移動させます：
.move-everywhere {
translate: 100px 50px 25px;
}これは、要素を100ピクセル右に、50ピクセル下に、そして25ピクセルビューアーから遠ざけます。まるで要素に「3D空間で自由に動き回っていいよ」と言っているようなものです！
結論
そして、皆さん！私たちが素晴らしいCSS変換の世界を旅しました。力が大きいほど、責任も重大です。これらの変換を賢く使って、魅力的で動的なウェブページを作成しましょう。
去る前に、あなたの近所の親切なコンピュータ教師からの小さなアドバイス：あなたの変換を異なるデバイスやブラウザでテストしてください。あなたのコンピュータでは完璧に見えるものが、他の人のスマートフォンでは少し違う見え方をするかもしれません。
それでは、ウェブ要素を新しい高さ（そして幅、奥行き）に変換していくために進んでいきましょう！ハッピーコーディング！
Credits: Image by storyset