-
CSS3之转换(2D转换,动画，3D转换)
1. 2D转换
1.1 2D转换之移动translate
1.1.1 translate基本使用
<!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>translate</title> <style> div { width: 200px; height: 200px; background-color: pink; /* 1. 沿x轴向右移动100px， 沿y轴向下移动200px */ /* transform: translate(100px, 200px); */ /* 2. 只沿x轴向右移动100px */ /* transform: translateX(100px); */ /* 3. 只沿Y轴向下移动100px */ transform: translateY(100px); } </style> </head> <body> <div></div> </body> </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
1.1.2 translate 不会影响其他元素案例
<!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>translate</title> <style> div { font-size: 50px; text-align: center; line-height: 200px; } .box1 { width: 200px; height: 200px; background-color: pink; transform: translate(50px, 50px); } .box2 { width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </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
1.2 旋转
1.2.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>旋转</title> <style> div { width: 200px; height: 200px; background-color: skyblue; /* 顺时针旋转45度 */ transform: rotate(45deg); } </style> </head> <body> <div></div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
1.2.2 添加过渡效果的旋转
<!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>旋转</title> <style> div { width: 200px; height: 200px; background-color: skyblue; /* 添加过渡效果 */ transition: all 1s; } div:hover { /* 顺时针旋转45度 */ transform: rotate(45deg); } </style> </head> <body> <div></div> </body> </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
1.2.3 旋转案例–三角形旋转
<!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>案例-三角形</title> <style> div { width: 100px; height: 100px; border: 20px solid transparent; border-right-color: black; border-bottom-color: black; transform: rotate(-45deg); transition: all 1s; margin: 0 auto; } div:hover { transform: rotate(45deg); } </style> </head> <body> <div></div> </body> </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
1.3 设置2D转换中心点
<!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>设置2D转换中心点</title> <style> div { width: 200px; height: 200px; background-color: skyblue; font-size: 50px; /* 设置旋转中心点 */ /* transform-origin: 20px 20px; */ transform-origin: left bottom; /* 设置过渡效果 */ transition: all 1s; margin: 200px; } div:hover { transform: rotate(180deg); } </style> </head> <body> <div>div盒子</div> </body> </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
1.3.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>设置2D转换中心点</title> <style> div { overflow: hidden; width: 200px; height: 200px; background-color: skyblue; border: 2px solid skyblue; font-size: 50px; margin: 100px auto; } div img { width: 100%; height: 100%; /* 设置旋转中心点 */ transform-origin: left bottom; /* 设置过渡效果 */ transition: all 1s; transform: rotate(180deg); } div:hover img{ transform: rotate(0deg); } </style> </head> <body> <div> <img src="xxx" alt=""> </div> </body> </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
1.4 2D转换之缩放scale
<!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>Document</title> <style> div { width: 200px; height: 200px; background-color: skyblue; } div:hover { /* 1.里面写的数字不跟单位就是倍数的意思1就是1倍 2就是2倍*/ /* transform:scale(x, y); */ /* transform: scale(2, 2); */ /* 2.修改了宽度为原来的2倍 高度不变*/ /* transform: scale(2, 1); */ /*3.等比例缩放同时修改宽度和高度，我们有简单的写法以下是宽度修改了2倍，高度默认和第一 个参数一样*/ /* transform: scale(2); */ /* 4.我们可以进行缩小 小于1就是缩放*/ /* transform: scale(0.5, 0.5); */ transform: scale(0.5); /* 5. scale的优势之处: 不会影响其他的盒子而且可以设置缩放的中心点*/ } </style> </head> <body> <div></div> </body> </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
1.4.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>放大案例</title> <style> div { overflow: hidden; float: left; border: 2px solid skyblue; } div img { transition: all .4s; } div img:hover { transform: scale(1.1); } </style> </head> <body> <div><a href="#"><img src="img/true (1).jpg" alt=""></a></div> <div><a href="#"><img src="img/true (1).jpg" alt=""></a></div> <div><a href="#"><img src="img/true (1).jpg" alt=""></a></div> </body> </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
1.5 2D旋转综合写法（重要）
<!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>8.2D旋转综合写法</title> <style> div { width: 200px; height: 200px; background-color: skyblue; /* 添加过渡 */ transition: all .4s; } div:hover { /* 综合写法时，千万不要将rotate放到前面，因为是按顺序执行的，要放到前面的话首先执行旋转，然后再移动，那么旋转时会改变原本的坐标导致移动的方向错误 */ transform: translate(200px) rotate(360deg) scale(.5); } </style> </head> <body> <div></div> </body> </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
错误次序造成的结果
<!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>8.2D旋转综合写法</title> <style> div { width: 200px; height: 200px; background-color: skyblue; /* 添加过渡 */ transition: all .4s; } div:hover { /* 错误写法造成的结果 */ transform: rotate(360deg) translate(200px) scale(.5); } </style> </head> <body> <div></div> </body> </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
-
相关阅读:
AI-线性回归模型
Cmake学习
运行软件提示丢失msvcr120.dll文件怎么办？msvcr120.dll丢失的5个最新解决方法
vue3使用tsx自定义弹窗组件
雨云游戏云面板服使用教程&我的世界Forge服务端开服教程（翼龙面板）
LeetCode 54. 螺旋矩阵
面试算法26：重排链表
简析Acrel-1000安科瑞变电站综合自动化系统选型与应用
Delphi的系统模块全部采用汇编语言开发-这执行效率在传奇时代估计是叼咋天，难怪能开发出中国最大游戏IP-传奇
如何在外地外网电脑远程公司项目?
- 原文地址：https://blog.csdn.net/cjhxydream/article/details/125627936