提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

转换css3 设置 效果 样式 旋转 2D transform
2023-09-14 09:07:26 时间

文章目录





一、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>

执行结果 :

  • 默认效果 :
    在这里插入图片描述
  • 鼠标指针移动到元素上方后的效果 :

在这里插入图片描述

相关文章