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

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 をよろしくお願いいたします。

<<:  Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

>>:  無効にするとフォームの入力が送信できない問題の解決方法

推薦する

VueはBaidu Mapsを使用して都市の位置特定を実現

この記事では、参考までに、Baidu Mapsを使用して都市の位置特定を実現するVueの具体的なコー...

継続的インテグレーションテストにおけるDocker Swarmの適用の詳細な説明

背景アジャイル モデルは広く使用されており、テストは特に重要です。新しいバージョンは頻繁にリリースす...

Webpack での publicPath の使用法の詳細な説明

目次出力出力パス出力.publicPath webpack-dev-server の publicP...

Webフロントエンド開発エンジニアが習得すべきコアスキル

Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

MySQL の 10 進数データ型の小数点埋め込み問題の詳細な説明

序文開発プロセスでは、10 進データ型がよく使用されます。 MySQL では、小数点は正確なデータ型...

Vue3 でタイマーコンポーネントをカプセル化する方法

背景一部のショッピング モールの Web ページで商品の詳細を開くと、購入数量を選択するためのカウン...

phpmyadmin を使用して MySQL 権限を設定する方法

目次ステップ 1: root ユーザーとしてログインします。ステップ 2: 新しいデータ テーブルを...

CSS 完全な視差スクロール効果

1. 何ですか視差スクロールとは、複数の背景レイヤーを異なる速度で動かすことで、3次元のモーション...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...

イメージのアップロードとダウンロードに docker をプロキシするためのプライベート ライブラリとして nexus を使用する

1. Nexusの設定1. Dockerプロキシを作成する外部ネットワーク ウェアハウスからローカル...

pt-heartbeat を使用して MySQL レプリケーションの遅延を監視する方法の詳細な説明

pt-ハートビートデータベースがマスターとスレーブ間で複製される場合、複製ステータスとデータ遅延は非...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

Vueはカルーセルアニメーションを実装します

この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...