訪問者の関心を引き付け、サイトに留まるためには、視覚的に魅力的な Web サイトを作成することが重要です。 Web サイトに深みと魅力を加える 1 つの方法は、CSS 3D 変換を使用することです。これらの効果により、画像がよりダイナミックかつインタラクティブに表示され、より良いユーザー エクスペリエンスが提供されます。この投稿では、CSS 3D 変換を使用して、視聴者を魅了する素晴らしい効果を作成する方法を検討します。

3D 変換とは何ですか?

3D 変換を使用すると、3 次元空間内の要素を移動、回転、拡大縮小できます。 X 軸と Y 軸に沿って要素を操作することしかできない 2D 変換とは異なり、3D 変換では Z 軸が追加され、要素に奥行きが与えられます。

基本的な 3D 変換

1. 3D で画像を回転

3D 空間で画像を回転すると、よりダイナミックな外観を与えることができます。その方法は次のとおりです:

.rotate-3d {
  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
  transition: transform 0.5s;
}

.rotate-3d:hover {
  transform: rotateX(0) rotateY(0) rotateZ(0);
}

2. 3D 翻訳

Z 軸に沿って要素を移動すると、奥行きがあるかのような錯覚を生み出すことができます。

.translate-3d {
  transform: translateZ(50px);
  transition: transform 0.5s;
}

.translate-3d:hover {
  transform: translateZ(0);
}

3. 3Dスケール

3D で画像を拡大縮小すると、画像が近づいたり遠ざかったように見えることがあります。

.scale-3d {
  transform: scale3d(1.2, 1.2, 1.2);
  transition: transform 0.5s;
}

.scale-3d:hover {
  transform: scale3d(1, 1, 1);
}

3D 変換の組み合わせ

より複雑な効果を作成するには、複数の 3D 変換を組み合わせます。たとえば、画像の回転と平行移動を同時に行うことで、より没入感のある効果を生み出すことができます。

.combined-3d {
  transform: rotateY(45deg) translateZ(50px);
  transition: transform 0.5s;
}

.combined-3d:hover {
  transform: rotateY(0) translateZ(0);
}

視点を追加する

3D 効果を高めるために、要素に遠近感を追加できます。遠近法は、Z 軸がどのようにレンダリングされるかを決定することによって 3D 効果の強度を制御します。

.container {
  perspective: 1000px;
}

.perspective-3d {
  transform: rotateY(45deg);
  transition: transform 0.5s;
}

.perspective-3d:hover {
  transform: rotateY(0);
}

JavaScript を使用したインタラクティブな 3D 変換

より高度な操作を行うには、JavaScript を使用して 3D 変換を制御できます。これにより、マウスの動きなどのユーザーのアクションに反応するエフェクトを作成できます。

.interactive-3d {
  transition: transform 0.1s;
}

.container {
  perspective: 1000px;
}

const interactive3d = document.querySelector('.interactive-3d');

document.addEventListener('mousemove', (e) => {
  const x = (window.innerWidth / 2 - e.pageX) / 20;
  const y = (window.innerHeight / 2 - e.pageY) / 20;

  interactive3d.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
});

結論

CSS 3D 変換を使用すると、画像に奥行きとインタラクティブ性を追加して、Web サイトをより魅力的で視覚的に魅力的なものにすることができます。 3D 空間で要素を回転、拡大縮小、移動する場合でも、これらの効果はユーザー エクスペリエンスを大幅に向上させることができます。さまざまな組み合わせや視点を試して、視聴者を魅了する見事な 3D 効果を作成してください。