【CSS3】CSS3 2D 转换 - rotate 旋转 ( transform: rotate(90deg) 旋转样式 | transition 过度效果设置 )

韩曙亮

发布于 2023-04-24 11:31:44

1K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、CSS3 2D 转换 - rotate 旋转

CSS3 2D 转换 - rotate 旋转指的是令标签元素在二维坐标系中 , 顺时针 / 逆时针旋转指定的度数 ;

rotate 旋转语法 :

	transform: rotate(90deg);

旋转度数 : 旋转度数的单位是 deg , 表示度 ;
旋转方向 : 度数为整数为顺时针旋转 , 度数为负数为逆时针旋转 ;
旋转中心 : 默认的旋转中心点为标签元素的中心点 ;

二、代码示例

1、未旋转状态

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 2D 转换 - rotate 旋转</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div>
        顺时针旋转 45 度
    </div>
</body>

</html>

显示效果 :

2、旋转示例 - transition 过度效果设置

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 2D 转换 - rotate 旋转</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* 顺时针旋转 45 度 */
            transform: rotate(45deg);
            background-color: pink;
            margin: 100px;
            /* 将过渡效果写到元素本身上 为动画元素添加 */
            transition: all 1s;
        }
        
        div:hover {
            /* 鼠标移动到 div 元素上方时 旋转到 90 度 */
            transform: rotate(90deg);
        }
    </style>
</head>

<body>
    <div>
        顺时针旋转 45 度
    </div>
</body>

</html>

执行结果 :