动画设计：如何利用perspective和transform创建随鼠标倾斜的图片

2023-10-28 20:37:50

在现代网页设计中，动画和交互元素已成为必不可少的元素，它们可以有效地吸引用户注意力，增强用户体验。本文将介绍如何使用 CSS 和 JavaScript 创建一个交互式图片动画效果，当鼠标在图片上移动时，图片会根据鼠标的移动而倾斜，从而 tạo ra 一种 3D 效果。这种动画效果可以为你的网站或应用程序增添趣味性和互动性，使用户在浏览图片时获得更生动的体验。

HTML 准备工作

首先，我们需要准备一个 HTML 容器来容纳图片。在 HTML 代码中添加如下代码：

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

CSS 样式

接下来，我们需要使用 CSS 来设置图片的样式。在 CSS 代码中添加如下代码：

.image-container {
  position: relative;
  width: 500px;
  height: 500px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

JavaScript 代码

最后，我们需要使用 JavaScript 来监听鼠标移动事件并更新图片的 transform 属性。在 JavaScript 代码中添加如下代码：

const imageContainer = document.querySelector('.image-container');
const image = document.querySelector('img');

imageContainer.addEventListener('mousemove', (e) => {
  const x = e.clientX - imageContainer.offsetLeft;
  const y = e.clientY - imageContainer.offsetTop;

  const angleX = (x / imageContainer.clientWidth) * 10;
  const angleY = (y / imageContainer.clientHeight) * 10;

  image.style.transform = `perspective(500px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
});