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

1. 什么是 scale() 函数？

scale() 函数是 CSS3 transform 属性的一个变换函数，用于在 2D 平面上缩放元素。它允许你沿 X 轴和 Y 轴缩放元素，从而创建放大或缩小的效果。通过 scale() 函数，你可以为网页添加动态的视觉效果和交互体验。

2. 语法

2.1 基本语法

transform: scale(sx, sy);

2.2 简化语法

/* 仅沿 X 轴缩放 */
transform: scaleX(sx);

/* 仅沿 Y 轴缩放 */
transform: scaleY(sy);

/* 同时沿 X 和 Y 轴缩放相同比例 */
transform: scale(s);

2.3 参数说明

  • sx：沿 X 轴缩放的比例因子
  • sy：沿 Y 轴缩放的比例因子
  • s：同时沿 X 和 Y 轴缩放的比例因子

2.4 比例因子说明

  • 大于 1：元素放大（如 1.5 表示放大到 1.5 倍）
  • 等于 1：元素大小不变
  • 大于 0 且小于 1：元素缩小（如 0.5 表示缩小到 0.5 倍）
  • 等于 0：元素缩放到不可见
  • 小于 0：元素缩放并翻转（如 -1 表示缩小到 1 倍并翻转）

3. 基础示例

示例 1：基本缩放效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scale() 基本示例</title>
    <style>
        .container {
            display: flex;
            gap: 40px;
            margin: 50px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .scale-up:hover {
            /* 放大到 1.5 倍 */
            transform: scale(1.5);
        }
        
        .scale-down:hover {
            /* 缩小到 0.8 倍 */
            transform: scale(0.8);
        }
        
        .scale-x:hover {
            /* 仅沿 X 轴放大到 1.5 倍 */
            transform: scaleX(1.5);
        }
        
        .scale-y:hover {
            /* 仅沿 Y 轴放大到 1.5 倍 */
            transform: scaleY(1.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <p>放大效果</p>
            <div class="box scale-up">放大</div>
        </div>
        <div>
            <p>缩小效果</p>
            <div class="box scale-down">缩小</div>
        </div>
        <div>
            <p>仅 X 轴缩放</p>
            <div class="box scale-x">X 轴缩放</div>
        </div>
        <div>
            <p>仅 Y 轴缩放</p>
            <div class="box scale-y">Y 轴缩放</div>
        </div>
    </div>
</body>
</html>

示例 2：负值缩放（翻转效果）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scale() 负值缩放示例</title>
    <style>
        .container {
            display: flex;
            gap: 40px;
            margin: 50px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease;
        }
        
        .scale-flip-x:hover {
            /* 沿 X 轴翻转 */
            transform: scaleX(-1);
        }
        
        .scale-flip-y:hover {
            /* 沿 Y 轴翻转 */
            transform: scaleY(-1);
        }
        
        .scale-flip-both:hover {
            /* 同时沿 X 和 Y 轴翻转 */
            transform: scale(-1, -1);
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <p>沿 X 轴翻转</p>
            <div class="box scale-flip-x">X 轴翻转</div>
        </div>
        <div>
            <p>沿 Y 轴翻转</p>
            <div class="box scale-flip-y">Y 轴翻转</div>
        </div>
        <div>
            <p>同时翻转</p>
            <div class="box scale-flip-both">双向翻转</div>
        </div>
    </div>
</body>
</html>

示例 3：缩放原点的影响

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scale() 缩放原点示例</title>
    <style>
        .container {
            display: flex;
            gap: 40px;
            margin: 50px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #2ecc71;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease;
        }
        
        .origin-center {
            /* 默认缩放原点：中心点 */
            transform-origin: center;
        }
        
        .origin-top-left {
            /* 缩放原点：左上角 */
            transform-origin: top left;
        }
        
        .origin-bottom-right {
            /* 缩放原点：右下角 */
            transform-origin: bottom right;
        }
        
        .box:hover {
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <p>缩放原点：center（默认）</p>
            <div class="box origin-center">缩放</div>
        </div>
        <div>
            <p>缩放原点：top left</p>
            <div class="box origin-top-left">缩放</div>
        </div>
        <div>
            <p>缩放原点：bottom right</p>
            <div class="box origin-bottom-right">缩放</div>
        </div>
    </div>
</body>
</html>

4. 实际应用场景

场景 1：悬停效果

为按钮、卡片等元素添加悬停时的缩放效果，增强交互体验。

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.button:active {
    transform: scale(0.95);
}

.card {
    width: 200px;
    height: 300px;
    background-color: #f1f1f1;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

场景 2：图片画廊效果

使用 scale() 函数创建图片画廊的悬停效果。

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .overlay {
    transform: translateY(0);
}

场景 3：模态框动画

使用 scale() 函数为模态框添加显示/隐藏动画。

<div class="modal" id="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>模态框标题</h2>
        <p>这是模态框的内容。</p>
    </div>
</div>

<button onclick="openModal()">打开模态框</button>

<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        animation: fadeIn 0.3s ease;
    }
    
    .modal-content {
        background-color: white;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
        border-radius: 8px;
        transform: scale(0.8);
        animation: scaleIn 0.3s ease forwards;
    }
    
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .close:hover {
        color: black;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes scaleIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
</style>

<script>
    function openModal() {
        document.getElementById('modal').style.display = 'block';
    }
    
    function closeModal() {
        document.getElementById('modal').style.display = 'none';
    }
    
    window.onclick = function(event) {
        const modal = document.getElementById('modal');
        if (event.target == modal) {
            closeModal();
        }
    }
</script>

场景 4：加载动画

使用 scale() 函数创建脉冲加载动画效果。

.loader {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

5. 注意事项

  1. 浏览器兼容性：

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

  2. 性能考虑：

    • scale() 函数会触发 GPU 加速，性能通常比改变 width 和 height 属性更好
    • 对于频繁的缩放操作，建议使用 scale() 而不是改变尺寸属性

  3. 缩放原点：

    • 默认的缩放原点是元素的中心点（50% 50%）
    • 可以使用 transform-origin 属性修改变换原点，从而改变缩放的中心点

  4. 与其他变换的组合：

    • scale() 可以与其他变换函数（如 translate()、rotate()、skew()）组合使用
    • 变换顺序会影响最终效果，建议将 scale() 放在其他变换之后

  5. 文本清晰度：

    • 过度缩放可能会导致文本模糊
    • 建议在合理范围内使用缩放效果，避免过大或过小的缩放比例

  6. 布局影响：

    • scale() 不会影响文档流，元素的原始空间会被保留
    • 其他元素不会因为被缩放的元素而移动

6. 总结

scale() 函数是 CSS3 中用于缩放元素的重要工具，它允许你：

  • 沿 X 轴和 Y 轴缩放元素
  • 使用不同的缩放比例因子
  • 实现元素的放大、缩小和翻转效果
  • 与其他变换函数组合创建复杂效果
  • 配合 transition 和 animation 属性创建平滑的动画效果
  • 实现各种交互效果，如悬停反馈、模态框动画等

通过合理使用 scale() 函数，你可以创建更加生动、交互式的网页界面，提升用户体验。

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