【HTML】【CSS3】CSS3新增知识概述(2)_2D旋转与动画相关知识

otate
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度
div{
transform: rotate(0deg);
}
1
2
3
旋转三角案例

核心思路：使用伪元素选择器生成正方形，绘制出右边框与底边框，然后将正方形顺时针旋转45度（deg）
1
代码
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 父元素相对定位，子元素绝对定位 */
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}

/* 后置伪元素选择器 */
div::after {
/* content必须存在，否则无效果 */
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
/* 绘制右边框 */
border-right: 1px solid #000;
/* 绘制底边框 */
border-bottom: 1px solid #000;
/* 顺时针旋转45度 */
transform: rotate(45deg);
transition: all 0.2s;
}

/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
二、设置元素旋转中心点(transform-origin)
transform-origin 基础语法

transform-origin: x y;
1
重要知识点

注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)
三、旋转中心案例
实现效果

代码

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
/* 超出范围隐藏 */
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
float: left;
}

div::before {
content: "ADUN";
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div 里面的before 复原 */

div:hover::before {
transform: rotate(0deg);
}
</style>
</head>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
四、2D 转换之 scale【缩放】
scale 的作用

用来控制元素的放大与缩小
语法

transform: scale(x, y)
1
知识要点

注意，x 与 y 之间使用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
代码演示

div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */

/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */

/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
1
2
3
4
5
6
7
8
9
10
五、图片放大案例
实现效果

代码

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}

div img {
/* 过渡时间0.4s */
transition: all .4s;
}

div img:hover {
transform: scale(1.1);
}
</style>
</head>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
六、分页按钮案例
实现效果

代码

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
/* 过渡时间0.4秒 */
transition: all .4s;
}

/* 结构伪类选择器鼠标略过 */
li:hover {
/* 等比放大1.2倍 */
transform: scale(1.2);
}
</style>
</head>

</html>

————————————————
版权声明：本文为CSDN博主「Mr.敦的私房菜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41816702/article/details/125647022

__EOF__

本文作者：stdxxd
本文链接：https://www.cnblogs.com/stdxxd/p/16504062.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！