CSS 旋转（rotate）

CSS 旋转语法

在 CSS3 中，我们可以使用 transform 属性结合 rotate() 函数来实现元素的旋转效果。

语法：

transform: rotate(angle);

说明：

参数 angle 表示元素相对于中心原点旋转的度数，单位为 deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。

提示: 除了旋转之外，CSS 变形还有其他 3 种效果：平移、缩放、倾斜。

CSS 旋转示例

接下来，我们通过几个简单的例子来讲解 CSS 是如何实现旋转效果的。

示例 1：围绕 “中心点” 旋转

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { padding: 100px; }
        /* 设置原始元素样式 */
        #origin {
            width: 200px;
            height: 100px;
            border: 1px dashed black;
        }
        /* 设置当前元素样式 */
        #current {
            width: 200px;
            height: 100px;
            color: white;
            background-color: hotpink;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

页面效果如下图所示。

围绕 “中心点” 旋转（1）

分析：

transform: rotate(30deg); 表示元素顺时针旋转 30°。如果把 30deg 改为 -30deg，此时页面效果如下图所示。

围绕 “中心点” 旋转（2）

示例 2：围绕 “左上角” 旋转

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { padding: 100px; }
        /* 设置原始元素样式 */
        #origin {
            width: 200px;
            height: 100px;
            border: 1px dashed black;
        }
        /* 设置当前元素样式 */
        #current {
            width: 200px;
            height: 100px;
            color: white;
            background-color: hotpink;
            /* 1. 设置旋转角度 */
            transform: rotate(30deg);
            /* 2. 关键代码：设置旋转中心为左上角 */
            transform-origin: left top; 
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

页面效果如下图所示。

CSS 围绕 “左上角” 旋转

分析：

默认情况下，元素是绕着中心点旋转。如果想绕着其他位置旋转（比如左上角），我们可以使用 transform-origin 属性来实现。

在实际开发中，单纯对某个元素定义旋转是没有太多意义的。在实际开发中，CSS 旋转大多数情况下都是结合 CSS 过渡或 CSS 动画来一起使用。