带你探索图片拖动、旋转和缩放的秘密（二）

2023-10-15 02:33:33

一、CSS 变换的 matrix() 函数

matrix() 函数是一个非常强大的 CSS 变换函数，它允许我们对元素进行各种各样的变换，包括平移、缩放、旋转和倾斜。matrix() 函数的语法如下：

matrix(a, b, c, d, e, f)

a：元素水平缩放的比例因子。
b：元素水平倾斜的比例因子。
c：元素垂直倾斜的比例因子。
d：元素垂直缩放的比例因子。
e：元素水平平移的距离。
f：元素垂直平移的距离。

二、图片拖动

要实现图片拖动，我们可以使用 transform: translate() 属性。translate() 属性可以将元素在水平方向或垂直方向上平移。

transform: translate(x, y);

x：元素在水平方向上平移的距离。
y：元素在垂直方向上平移的距离。

例如，以下代码将图片向右平移 100 像素，向下平移 50 像素：

transform: translate(100px, 50px);

三、图片旋转

要实现图片旋转，我们可以使用 transform: rotate() 属性。rotate() 属性可以将元素围绕其中心旋转一定角度。

transform: rotate(angle);

angle：元素旋转的角度，单位为度数。

例如，以下代码将图片旋转 45 度：

transform: rotate(45deg);

四、图片缩放

要实现图片缩放，我们可以使用 transform: scale() 属性。scale() 属性可以将元素在水平方向和垂直方向上缩放。

transform: scale(x, y);

x：元素在水平方向上缩放的比例因子。
y：元素在垂直方向上缩放的比例因子。

例如，以下代码将图片在水平方向和垂直方向上都缩放 2 倍：

transform: scale(2, 2);

五、实例演示

现在，让我们通过一个实例来演示如何使用 CSS 变换实现图片拖动、旋转和缩放。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <img id="image" src="image.jpg" alt="图片">

  <script>
    // 获取图片元素
    var image = document.getElementById('image');

    // 绑定拖动事件
    image.addEventListener('mousedown', function(e) {
      // 获取鼠标相对于图片元素的偏移量
      var offsetX = e.clientX - image.offsetLeft;
      var offsetY = e.clientY - image.offsetTop;

      // 绑定鼠标移动事件
      document.addEventListener('mousemove', function(e) {
        // 计算图片元素的移动距离
        var dx = e.clientX - offsetX;
        var dy = e.clientY - offsetY;

        // 将图片元素平移到新的位置
        image.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
      });

      // 绑定鼠标松开事件
      document.addEventListener('mouseup', function() {
        // 解绑鼠标移动事件
        document.removeEventListener('mousemove', function() {});
      });
    });

    // 绑定旋转事件
    image.addEventListener('wheel', function(e) {
      // 计算旋转角度
      var angle = e.deltaY * 0.1;

      // 将图片元素旋转到新的角度
      image.style.transform = 'rotate(' + angle + 'deg)';
    });

    // 绑定缩放事件
    image.addEventListener('dblclick', function() {
      // 将图片元素缩放 2 倍
      image.style.transform = 'scale(2, 2)';
    });
  </script>
</body>
</html>