創建一個具有視覺吸引力的網站對於吸引訪客並讓他們留在您的網站上至關重要。為您的網站增加深度和吸引力的一種方法是使用 CSS 3D 轉換。這些效果可以使您的影像看起來更加動態和交互，從而提供更好的使用者體驗。在這篇文章中，我們將探索如何使用 CSS 3D 轉換來創造令人驚嘆的效果來吸引您的觀眾。

什麼是 3D 變換？

3D 變換可讓您在三維空間中移動、旋轉和縮放元素。與僅允許您沿 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 轉換，您可以為圖片添加深度和互動性，使您的網站更具吸引力和視覺吸引力。無論您是在 3D 空間中旋轉、縮放還是平移元素，這些效果都可以顯著增強使用者體驗。嘗試不同的組合和視角，創造令人驚嘆的 3D 效果，吸引觀眾。