画像のホバー回転効果を使用すると、コンテンツをより魅力的でインタラクティブにすることができます。このチュートリアルでは、HTML と CSS だけを使用して、シンプルでありながら人目を引くホバー回転効果を作成する方法を説明します。

エフェクトの作成方法

HTML:

まず、次の HTML コードを追加します:

お好きな画像を追加できます。

このコードは、hover-rotate クラスのタグでラップされた画像を設定します。

CSS:

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

仕組み:

.hover-rotate クラスは画像の寸法を設定し、オーバーフローを非表示にします。 .hover-rotate img クラスは、スムーズなトランジション効果を処理します。

画像の上にマウスを置くと、transform プロパティのおかげで、画像は 1.3 倍に拡大され、5 度回転します。

このチュートリアルが役立つと思われた場合は、お気軽に他の人と共有するか、下にコメントを残してください。 Web デザインに関するその他のヒントやコツについては、他の投稿もぜひチェックしてください。

このようなチュートリアルについては、私のウェブサイトにアクセスしてください