CSS rotate() 函数

CSS rotate() 语法

在 CSS 中，rotate() 函数一般作为 transform 属性的值，用于围绕元素的中心点旋转元素。

语法：

transform: rotate(angle);

说明：

angle 表示旋转的角度，可以使用以下单位：

deg（度）。
rad（弧度）。
turn（圈）。

当 angle 取值为正值时，表示元素顺时针旋转；当 angle 取值为负值时，表示元素逆时针旋转。

rotate() 角度值可以是任意数值，超过 360 度会继续旋转（例如 720deg 相当于旋转 2 圈）。

对于 rotate() 函数，小伙伴们还要清楚以下几点：

rotate() 只会影响视觉效果，而不会改变元素在页面中的占位，也不会影响周围其他元素的位置。
rotate() 可以与 translate()、scale()、skew() 等函数一起使用，来创建更加丰富的变换效果。
rotate() 旋转的中心点默认为元素的中点，不过我们可以通过 transform-origin 属性来改变。

CSS rotate() 摘要

属于	CSS 旋转
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

CSS rotate() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS rotate() 函数是如何使用的。

示例 1：rotate() 实现基本旋转

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: lightskyblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

rotate() 实现基本旋转

分析：

在这个例子中，transform: rotate(45deg) 表示将 div 元素顺时针旋转 45°。旋转只回影响元素的视觉效果，它的原始空间在文档流中是保持不变的。

示例 2：rotate() 结合 CSS 过渡

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: hotpink;
            transition: transform 0.3s ease;
        }
        div:hover {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

rotate() 结合过渡动画

分析：

在这个例子中，我们使用了 transition 属性来实现了过渡效果。当鼠标移到 div 元素上时，div 元素会平滑地顺时针旋转 90°。

示例 3：rotate() 调整旋转中心

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            transform: rotate(45deg);
            transform-origin: top left;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

rotate() 调整旋转中心

分析：

transform-origin: top left; 表示将旋转中心设置为元素的左上角，而不是默认的中心点。