1. ホーム
  2. Web制作
  3. CSS

[css3] 翻訳効果のあるcss3例(翻訳:translate)

2022-02-02 19:47:44

この動きを実現するために、translateパラメータを使用します。

translateX:X軸に平行移動、右側に正の数、左側に負の数を記入

translateY :Y軸に平行移動、下に移動する場合は正の値を、上に移動する場合は負の値を記入します。

translateZ :塗りつぶした値が大きいほど、画像に近い感覚で見ることができ、空の値が小さいほど、画像から遠く離れた場所で見ることができます

translate は translateX と translateY の両方を設定します。

translate(translateX,translateY)

第一引数はX軸への変換、右に正の数を記入、左に負の数を記入
2番目のパラメータはY軸への移動量です。正の数を記入すると下にパンし、負の数を記入すると上にパンします。

translate3dは、translateX、translateY、translateZも設定するので、3つのパラメータを記入することができます。
トランスレート3d()

transform: translate3d(0,-50%,-50px) 

最初のパラメータはX軸への移動で、右に正の値を、左に負の値を記入する
2つ目のパラメータはY軸への移動量です。正の数を記入すると下にパン、負の数を記入すると上にパンします。
3つ目のパラメータはZ軸への移動量です。値が大きいほど、自分が感じているイメージに近く、値が小さいほど遠くにあるイメージを見ていることになります

翻訳効果(翻訳:翻訳)例を達成するためにCSS3に関するこの記事は、ここで紹介されている、より関連するCSS3翻訳翻訳:翻訳コンテンツは、スクリプトホーム以前の記事を検索したり、次の関連記事を参照してください続けて、私はあなたが将来的にスクリプトホームをよりサポートすることを願っています!.