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

1. 什么是 rotate() 函数？

rotate() 函数是 CSS3 transform 属性的一个变换函数，用于在 2D 平面上绕元素的原点旋转元素。它允许你指定旋转的角度，从而创建各种旋转效果和动画。通过 rotate() 函数，你可以为网页添加动态的视觉效果和交互体验。

2. 语法

2.1 基本语法

transform: rotate(angle);

2.2 参数说明

  • angle：旋转的角度，可以是正数（顺时针旋转）或负数（逆时针旋转）

2.3 角度单位

  • deg：度（默认单位），如 45deg、-90deg
  • rad：弧度，如 1rad、-0.5rad
  • turn：圈数，如 0.5turn（180度）、1turn（360度）
  • grad：梯度，如 50grad（45度）

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>rotate() 基本示例</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            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;
        }
        
        .rotate-clockwise:hover {
            /* 顺时针旋转 45 度 */
            transform: rotate(45deg);
        }
        
        .rotate-counterclockwise:hover {
            /* 逆时针旋转 45 度 */
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box rotate-clockwise">顺时针旋转</div>
    </div>
    
    <div class="container">
        <div class="box rotate-counterclockwise">逆时针旋转</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>rotate() 角度单位示例</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;
        }
        
        .rotate-deg:hover {
            /* 使用度单位 */
            transform: rotate(90deg);
        }
        
        .rotate-rad:hover {
            /* 使用弧度单位（约 90 度） */
            transform: rotate(1.5708rad);
        }
        
        .rotate-turn:hover {
            /* 使用圈数单位（1/4 圈 = 90 度） */
            transform: rotate(0.25turn);
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <p>使用 deg 单位</p>
            <div class="box rotate-deg">旋转 90deg</div>
        </div>
        <div>
            <p>使用 rad 单位</p>
            <div class="box rotate-rad">旋转 1.5708rad</div>
        </div>
        <div>
            <p>使用 turn 单位</p>
            <div class="box rotate-turn">旋转 0.25turn</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>rotate() 旋转原点示例</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: 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>

4. 实际应用场景

场景 1：加载动画

使用 rotate() 函数创建简单的加载动画效果。

.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); }
}

场景 2：悬停效果

为按钮、图标等元素添加悬停时的旋转效果，增强交互体验。

.icon-button {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.icon-button:hover {
    transform: rotate(360deg);
}

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

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

场景 3：菜单图标动画

使用 rotate() 函数创建汉堡菜单图标的动画效果。

<div class="menu-icon" onclick="toggleMenu()">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

<style>
    .menu-icon {
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }
    
    .bar {
        width: 100%;
        height: 2px;
        background-color: #333;
        position: absolute;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .bar:nth-child(1) {
        top: 0;
    }
    
    .bar:nth-child(2) {
        top: 9px;
    }
    
    .bar:nth-child(3) {
        top: 18px;
    }
    
    .menu-icon.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    
    .menu-icon.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .menu-icon.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -8px);
    }
</style>

<script>
    function toggleMenu() {
        document.querySelector('.menu-icon').classList.toggle('active');
    }
</script>

场景 4：3D 卡片效果

结合 rotate() 函数和其他变换创建 3D 卡片效果。

.card-container {
    perspective: 1000px;
    width: 300px;
    height: 200px;
    margin: 50px;
}

.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;
    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);
}

5. 注意事项

  1. 浏览器兼容性：

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

  2. 性能考虑：

    • rotate() 函数会触发 GPU 加速，性能通常比其他变换函数更好
    • 对于频繁的旋转操作，建议使用 rotate() 而不是其他方法

  3. 旋转原点：

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

  4. 与其他变换的组合：

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

  5. 角度计算：

    • 正角度值会使元素顺时针旋转
    • 负角度值会使元素逆时针旋转
    • 角度值可以超过 360 度，此时元素会旋转相应的圈数

6. 总结

rotate() 函数是 CSS3 中用于旋转元素的重要工具，它允许你：

  • 绕元素的原点旋转指定的角度
  • 使用不同的角度单位（deg、rad、turn、grad）
  • 与其他变换函数组合创建复杂效果
  • 配合 transition 和 animation 属性创建平滑的动画效果
  • 实现各种交互效果，如加载动画、悬停反馈、菜单动画等

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

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