创建一个具有视觉吸引力的网站对于吸引访问者并让他们留在您的网站上至关重要。为您的网站增加深度和吸引力的一种方法是使用 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 效果，吸引观众。