CSS3 で翻訳効果 (transfrom: translate) を実装する例

移動を実現するためにtranslateパラメータを使用します

translateX: X 軸に沿って移動します。右方向に移動するには正の数を入力し、左方向に移動するには負の数を入力します。

translateY : Y軸に沿って移動します。下方向に移動するには正の数を入力し、上方向に移動するには負の数を入力します。

translateZ: 値が大きいほど、表示される画像が近くなります。値が小さいほど、表示される画像が遠くなります。

translateはtranslateXとtranslateYを同時に設定します

翻訳(翻訳X、翻訳Y)

最初のパラメータは、X 軸に沿った移動です。右に移動するには正の数を入力し、左に移動するには負の数を入力します。2 番目のパラメータは、Y 軸に沿った移動です。下に移動するには正の数を入力し、上に移動するには負の数を入力します。

translate3dはtranslateX、translateY、translateZを同時に設定するため、3つのパラメータを入力できます。
3D を翻訳する()

変換: translate3d(0,-50%,-50px)

最初のパラメータは、X 軸に沿った移動です。右に移動するには正の数を入力し、左に移動するには負の数を入力します。2 番目のパラメータは、Y 軸に沿った移動です。下に移動するには正の数を入力し、上に移動するには負の数を入力します。3 番目のパラメータは、Z 軸に沿った移動です。値が大きいほど、表示される画像は近くなります。値が小さいほど、表示される画像は遠くなります。

CSS3 で翻訳効果 (transfrom: translate) を実現する例についての記事はこれで終わりです。CSS3 翻訳 transfrom: translate の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。