ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで背景を回転させる方法

CSSで背景を回転させる方法

coldplay.xixi
coldplay.xixiオリジナル
2021-04-29 11:46:218717ブラウズ

CSS で背景を回転する方法: 最初にコンテンツのスタイルを定義し、画像が配置される領域の幅と高さを定義してから、transition 属性を使用して画像のトランジション効果を設定します。トランジションを作成し、回転によって変形を設定し、最後にプログラムを実行するだけです。

CSSで背景を回転させる方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS を使用して背景を回転する方法:

まず、ドキュメント内に 2 つの画像を含む HTML ドキュメントを用意し、次に 2 つの画像を回転します。

CSSで背景を回転させる方法

次に、次の図に示すように、HTML 内のコンテンツのいくつかのスタイル (主にタイトル スタイルと ul スタイル) を定義します。

CSSで背景を回転させる方法

#次に、次の図に示すように、画像が配置される li の幅と高さを定義します。

CSSで背景を回転させる方法

#次に、次の図に示すように、画像のトランジション効果を設定し、トランジションにトランジション属性を使用します。

CSSで背景を回転させる方法

#マウスが画像上にあるとき、下の図に示すように、回転によって画像に変換を設定します。正の数は時計回りを表し、負の数は反時計回りを表します。 。

CSSで背景を回転させる方法

最後にプログラムを実行すると、下の図に示すような効果が表示され、マウスを図の上に置くと時計回りまたは反時計回りに回転します。

CSSで背景を回転させる方法

関連チュートリアルの推奨事項:

CSS ビデオ チュートリアル

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。