CSS3 动画与变换 - transform 属性

1. 什么是 transform 属性？

transform 属性是 CSS3 中用于对元素进行几何变换的强大工具，它允许你对元素进行旋转（rotate）、缩放（scale）、平移（translate）、倾斜（skew）等操作，而不会影响文档流中的其他元素。通过 transform 属性，你可以创建各种丰富的视觉效果和动画。

2. 语法

transform: none | <transform-function> [ <transform-function> ]*;

取值说明

  • none：不应用任何变换（默认值）
  • &lt;transform-function&gt;：一个或多个变换函数，按顺序应用

3. 常用变换函数

3.1 平移（translate）

  • translate(tx, ty)：沿 X 和 Y 轴平移元素
  • translateX(tx)：仅沿 X 轴平移元素
  • translateY(ty)：仅沿 Y 轴平移元素

3.2 旋转（rotate）

  • rotate(angle)：绕元素原点旋转指定角度

3.3 缩放（scale）

  • scale(sx, sy)：沿 X 和 Y 轴缩放元素
  • scaleX(sx)：仅沿 X 轴缩放元素
  • scaleY(sy)：仅沿 Y 轴缩放元素

3.4 倾斜（skew）

  • skew(ax, ay)：沿 X 和 Y 轴倾斜元素
  • skewX(ax)：仅沿 X 轴倾斜元素
  • skewY(ay)：仅沿 Y 轴倾斜元素

3.5 矩阵变换（matrix）

  • matrix(a, b, c, d, tx, ty)：使用 2D 变换矩阵进行变换

3.6 3D 变换

  • translate3d(tx, ty, tz)：沿 X、Y 和 Z 轴平移元素
  • rotate3d(x, y, z, angle)：绕指定 3D 轴旋转元素
  • scale3d(sx, sy, sz)：沿 X、Y 和 Z 轴缩放元素
  • perspective(d)：设置透视效果

4. 基础示例

示例 1：基本变换效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform 基础示例</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            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;
        }
        
        .translate:hover {
            transform: translate(20px, 20px);
        }
        
        .rotate:hover {
            transform: rotate(45deg);
        }
        
        .scale:hover {
            transform: scale(1.5);
        }
        
        .skew:hover {
            transform: skew(15deg, 5deg);
        }
        
        .combined:hover {
            transform: translate(10px, 10px) rotate(15deg) scale(1.2);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box translate">平移</div>
        <div class="box rotate">旋转</div>
        <div class="box scale">缩放</div>
        <div class="box skew">倾斜</div>
        <div class="box combined">组合变换</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>transform-origin 示例</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;
        }
        
        .origin-center {
            transform-origin: center;
        }
        
        .origin-top-left {
            transform-origin: top left;
        }
        
        .origin-bottom-right {
            transform-origin: bottom right;
        }
        
        .box:hover {
            transform: rotate(45deg);
        }
    </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>

5. 实际应用场景

场景 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: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

场景 2：卡片翻转效果

<div class="card-container">
    <div class="card">
        <div class="card-front">
            <h3>卡片正面</h3>
            <p>这是卡片的正面内容</p>
        </div>
        <div class="card-back">
            <h3>卡片背面</h3>
            <p>这是卡片的背面内容</p>
        </div>
    </div>
</div>

<style>
    .card-container {
        perspective: 1000px;
        width: 300px;
        height: 200px;
    }
    
    .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
    }
    
    .card-container:hover .card {
        transform: rotateY(180deg);
    }
    
    .card-front, .card-back {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .card-front {
        background-color: #3498db;
        color: white;
    }
    
    .card-back {
        background-color: #e74c3c;
        color: white;
        transform: rotateY(180deg);
    }
</style>

场景 3：加载动画

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

6. 注意事项

  1. 浏览器兼容性：

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

  2. 性能考虑：

    • transform 属性会触发 GPU 加速，通常比改变 top、left 等属性性能更好
    • 对于频繁的变换操作，建议使用 transform 而不是定位属性

  3. 变换顺序：

    • 多个变换函数的顺序会影响最终效果，因为变换是按顺序应用的
    • 例如：transform: rotate(45deg) translate(50px) 与 transform: translate(50px) rotate(45deg) 会产生不同的结果

  4. 变换原点：

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

  5. 3D 变换：

    • 要使用 3D 变换，需要设置 transform-style: preserve-3d 和 perspective 属性

7. 总结

transform 属性是 CSS3 中创建丰富视觉效果的强大工具，它允许你：

  • 对元素进行平移、旋转、缩放、倾斜等基本变换
  • 组合多个变换函数创建复杂效果
  • 配合 transition 和 animation 属性创建平滑的动画效果
  • 使用 3D 变换创建立体效果
  • 通过 transform-origin 控制变换的中心点

通过合理使用 transform 属性，你可以创建更加生动、交互式的网页界面，提升用户体验。

« 上一篇 CSS3 动画与变换 - animation-play-state 属性 下一篇 » CSS3 动画与变换 - translate() 函数
↑