CSSで画像を左に移動させる方法

CSS では、「transform:translateX(px)」スタイルを使用して画像を左に移動できます。transform 属性を使用すると、要素を回転、拡大縮小、移動または傾斜し、値を設定できます「translateX(px)」に代入して翻訳を実行します。

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「css ビデオ チュートリアル 」

css3 は非常に強力で、わずか数行のコード (動的とはみなされません) で非常に優れたモバイル効果を実現できます。ページ）。

css は画像を左に移動します

ページ構造が重要です。これがネストされた構造です。img タグが画像を導入する鍵となります (ただし、そうではありません (効果に影響を与える鍵ではなく、美化のためだけです)、正しく導入できるように全員がパスに注意を払う必要があります。重要な点は、ステージ div (ステージ) とコンテナー div を構造化することです。 (コンテナ); 図 2 は、見やすくするために画像のサイズを制御することです;

次にスタイルです。次の図は基本的なスタイルです。 3D エフェクトを作成するときのステージの選択 (エディターはこれをベースとして 3D エフェクトを作成します。2D ディスプレイスメント コードだけの場合は無視できます。もちろん、ステージ div を記述する必要はありません)見る距離を制御し、perspective-origin は遠近感を制御します (どちらも 3D に関係します)

container div は 2D ディスプレイスメントを制御するための鍵です。キー属性はtransformです。この属性のtransform :translate(px, px); これは 2D シーンのディスプレイスメントを制御する属性です;

ここで transfo-style:preserver-3d; div が 3D になり、自然に 2D 効果を実現できます。トランジションは、動的な画像効果を実現するためにトランジションを制御します。

次は動的な効果を制御します。マウスを上に動かして画像を移動します。(: hover pseudo-クラス セレクターは上記の遷移属性と一致します);transform:translateX (150px)、これは画像が X 軸の正の方向に移動するように制御します。X は大文字であることに注意してください。

以上がCSSで画像を左に移動させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。