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 ウェアハウス設定に基づく)

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

推薦する

30分でReact Hooksを包括的に理解できます

目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...

MySQL 8.0.18はデータベースにユーザーを追加し、権限を付与します

1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

ドメイン名、ポート、IPに基づいてnginx仮想ホストを構築する

nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...

デスクトップ仮想化を実現するために Hyper-V を展開する手順 (グラフィック チュートリアル)

Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...

Linuxオンラインソフトウェアgccをオンラインでインストールする方法

Linux オンラインインストール関連コマンド: yum install: すべてインストールyum...

CentOS 6 または CentOS 7 でディスク領域をクリアする方法

以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...

Linux echo テキスト処理コマンドの使用法と例

Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...

HTML における DTD の使用法の概要

DTD はマークアップの文法規則のセットです。これは XML 1.0 仕様の一部であり、HTML フ...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...

Mac で MySQL バージョン 5.6 のパスワードを設定する方法

MySQLはインストール時に設定できますが、それより低いバージョンは設定できないようで、インストール...