CSS3 动画与变换 - matrix() 函数

1. 什么是 matrix() 函数？

matrix() 函数是 CSS3 transform 属性的一个变换函数，用于使用 2D 变换矩阵对元素进行变换。它是最底层的变换函数，可以实现所有其他 2D 变换函数（如 translate()、rotate()、scale()、skew()）的效果。通过 matrix() 函数，你可以创建更加复杂和精确的变换效果。

2. 语法

2.1 基本语法

transform: matrix(a, b, c, d, tx, ty);

2.2 参数说明

matrix() 函数接受 6 个参数，这些参数组成了一个 3x3 的变换矩阵：

[a c tx]
[b d ty]
[0 0 1]
  • a：水平缩放因子
  • b：水平倾斜因子
  • c：垂直倾斜因子
  • d：垂直缩放因子
  • tx：水平平移量
  • ty：垂直平移量

2.3 矩阵变换原理

当你应用 matrix(a, b, c, d, tx, ty) 变换时，元素中的每个点 (x, y) 都会被转换为新的点 (x', y')，转换公式为：

x' = a * x + c * y + tx
y' = b * x + d * y + ty

3. 基础示例

示例 1：使用 matrix() 实现平移效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matrix() 平移示例</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .box:hover {
            /* 实现向右平移 50px，向下平移 30px 的效果 */
            /* 相当于 transform: translate(50px, 30px); */
            transform: matrix(1, 0, 0, 1, 50, 30);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看平移效果</div>
    </div>
</body>
</html>

示例 2：使用 matrix() 实现缩放效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matrix() 缩放示例</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .box:hover {
            /* 实现水平缩放 1.5 倍，垂直缩放 1.2 倍的效果 */
            /* 相当于 transform: scale(1.5, 1.2); */
            transform: matrix(1.5, 0, 0, 1.2, 0, 0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看缩放效果</div>
    </div>
</body>
</html>

示例 3：使用 matrix() 实现旋转变换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matrix() 旋转示例</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #2ecc71;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .box:hover {
            /* 实现旋转 45 度的效果 */
            /* 相当于 transform: rotate(45deg); */
            /* 计算方式：a = cos(45°), b = sin(45°), c = -sin(45°), d = cos(45°) */
            transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看旋转效果</div>
    </div>
</body>
</html>

示例 4：使用 matrix() 实现倾斜效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matrix() 倾斜示例</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #f39c12;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .box:hover {
            /* 实现水平倾斜 30 度，垂直倾斜 15 度的效果 */
            /* 相当于 transform: skew(30deg, 15deg); */
            /* 计算方式：b = tan(15°), c = tan(30°) */
            transform: matrix(1, 0.2679, 0.5774, 1, 0, 0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看倾斜效果</div>
    </div>
</body>
</html>

示例 5：使用 matrix() 实现组合变换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>matrix() 组合变换示例</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #9b59b6;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .box:hover {
            /* 实现组合变换：缩放 + 旋转 + 平移 */
            /* 相当于 transform: scale(1.2) rotate(30deg) translate(20px, 10px); */
            transform: matrix(1.0392, 0.6, -0.6, 1.0392, 20, 10);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看组合效果</div>
    </div>
</body>
</html>

4. 实际应用场景

场景 1：创建自定义变换效果

使用 matrix() 函数创建自定义的复杂变换效果。

.custom-transform {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: matrix(1.2, 0.3, -0.2, 1.1, 20, 10);
    transition: transform 0.3s ease;
}

.custom-transform:hover {
    transform: matrix(1.3, 0.4, -0.3, 1.2, 30, 15);
}

场景 2：动画中使用 matrix()

在动画中使用 matrix() 函数创建复杂的变换动画。

.animated-element {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    animation: complexAnimation 3s ease-in-out infinite;
}

@keyframes complexAnimation {
    0% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
    25% {
        transform: matrix(1.2, 0.2, -0.2, 1.2, 50, 20);
    }
    50% {
        transform: matrix(0.8, 0.4, -0.4, 0.8, 0, 40);
    }
    75% {
        transform: matrix(1.1, -0.2, 0.2, 1.1, -30, 10);
    }
    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

场景 3：实现 3D 透视效果的模拟

使用 matrix() 函数模拟简单的 3D 透视效果。

.perspective-element {
    width: 200px;
    height: 150px;
    background-color: #2ecc71;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: matrix(1, 0, 0.2, 1, 0, 0);
    transition: transform 0.3s ease;
}

.perspective-element:hover {
    transform: matrix(1, 0, 0.3, 1, 0, 0);
}

场景 4：创建镜像效果

使用 matrix() 函数创建水平或垂直镜像效果。

/* 水平镜像 */
.horizontal-mirror {
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

/* 垂直镜像 */
.vertical-mirror {
    transform: matrix(1, 0, 0, -1, 0, 0);
}

/* 水平和垂直镜像 */
.both-mirror {
    transform: matrix(-1, 0, 0, -1, 0, 0);
}

5. 注意事项

  1. 浏览器兼容性：

    • 现代浏览器（Chrome、Firefox、Safari、Edge）都支持 matrix() 函数
    • 对于旧版本浏览器，可能需要添加浏览器前缀（如 -webkit-、-moz-、-o-）

  2. 计算复杂性：

    • matrix() 函数的参数计算相对复杂，需要一定的数学知识
    • 对于简单的变换，建议使用其他更直观的变换函数（如 translate()、rotate()、scale()、skew()）

  3. 性能考虑：

    • matrix() 函数会触发 GPU 加速，性能通常比其他变换函数更好
    • 对于复杂的变换，使用 matrix() 函数可以减少变换函数的数量，提高性能

  4. 调试困难：

    • matrix() 函数的参数难以直观理解和调试
    • 建议使用浏览器的开发者工具来实时调整和查看变换效果

  5. 与其他变换的组合：

    • matrix() 可以与其他变换函数组合使用，但由于其复杂性，建议单独使用
    • 当与其他变换函数组合时，变换顺序会影响最终效果

6. 矩阵变换的数学基础

6.1 基本变换的矩阵表示

变换类型 变换函数 matrix() 等效表示
平移 translate(tx, ty) matrix(1, 0, 0, 1, tx, ty)
缩放 scale(sx, sy) matrix(sx, 0, 0, sy, 0, 0)
旋转 rotate(θ) matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)
倾斜 skew(ax, ay) matrix(1, tan(ay), tan(ax), 1, 0, 0)

6.2 组合变换的矩阵计算

当你需要组合多个变换时，可以通过矩阵乘法来计算最终的 matrix() 参数。例如，先缩放再旋转的组合变换：

  1. 缩放矩阵：matrix(sx, 0, 0, sy, 0, 0)
  2. 旋转矩阵：matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)
  3. 组合矩阵：缩放矩阵 × 旋转矩阵

7. 总结

matrix() 函数是 CSS3 中最强大、最灵活的变换函数，它允许你：

  • 使用 2D 变换矩阵对元素进行精确变换
  • 实现所有其他 2D 变换函数的效果
  • 创建更加复杂和自定义的变换效果
  • 在动画中实现平滑的复杂变换
  • 提高复杂变换的性能

虽然 matrix() 函数的参数计算相对复杂，但它为你提供了对元素变换的完全控制。对于简单的变换，建议使用其他更直观的变换函数；但对于复杂的变换或需要性能优化的场景，matrix() 函数是一个强大的工具。

通过理解和掌握 matrix() 函数，你可以创建更加丰富和精确的视觉效果，提升网页的交互体验。

« 上一篇 CSS3 动画与变换 - skew() 函数 下一篇 » CSS3 动画与变换 - translate3d() 函数
↑