声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！
2d转换：
2D 转换是改变标签在二维平面上的位置和形状。
- 移动：translate
- 旋转：rotate
- 缩放：scale
移动：translate
ransform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
特点：
- 不影响其他元素的位置
- 100%单位，是相对于本身的宽度和高度来计算
案例：盒子居中时，“子绝父相”，中，子盒子回退宽高时可设置，见：盒子在页面中水平垂直方向居中方法总结方法二
旋转：rotate
/* 单位是：deg */
transform: rotate(度数)
特点：
- rotate 里面跟度数，单位是 deg
- 角度为正时，顺时针，角度为负时，逆时针
- 默认旋转的中心点是元素的中心点
案例：
①实现效果：当鼠标放上图片时，图片旋转360度
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
border: 5px solid pink;
border-radius: 50%;
/* transform: rotate(45deg); */
/* 动画过渡：过渡写到自身上，谁做动画给谁加 */
transition: all 0.3s;
}
/* 鼠标经过图片时，旋转图片 */
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="imgs/q.png" alt="">
</body>
</html>
②实现效果：当鼠标放上盒子时，三角旋转
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 50px;
border: 1px solid red;
position: relative;
}
/* 伪元素：在元素内部的后面插入内容，属于行内元素 */
.box::after {
content: "";
border-right: 1px solid black;
border-bottom: 1px solid black;
/* 设置定位后，改变元素的显示属性（不再是行内元素） */
position: absolute;
top: 15px;
right: 13px;
width: 10px;
height: 10px;
/* 旋转45度 */
transform: rotate(45deg);
/* 动画过渡 */
transition: all .3s;
}
/* 鼠标经过盒子，里面的三角旋转 */
.box:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
③实现效果：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
/* 溢出隐藏，不显示其他内容 */
overflow: hidden;
/* 使盒子水平排列 */
float: left;
}
.father::before {
content: "内容";
/* 伪元素是行内元素，无法设置宽高，因此转换为块状元素 */
display: block;
width: 100%;
height: 100%;
background-color: pink;
/* 以左下角为旋转中心，旋转180度 */
transform: rotate(180deg);
transform-origin: left bottom;
/* 动画过渡效果 */
transition: all .3s;
}
/* 鼠标经过盒子时，旋转0度 */
.father:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="father">
</div>
<div class="father">
</div>
<div class="father">
</div>
</body>
</html>
缩放：scale
transform: scale(x, y)
特点：
- 可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
- 数字是倍数的含义，所以不需要加单位
案例：
①图片放大
实现效果：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
margin: 5px;
/* 溢出隐藏 */
overflow: hidden;
}
ul li a img {
width: 200px;
/* 动画过渡 */
transition: all .4s;
}
/* 鼠标经过图片时，放大1.2倍 */
ul li a img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>
<a href="#"><img src="imgs/scene.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="imgs/scene.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="imgs/scene.jpg" alt=""></a>
</li>
</ul>
</body>
</html>
②分页按钮效果
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid skyblue;
float: left;
margin: 5px;
/* 鼠标经过变为小手样式 */
cursor: pointer;
/* 正方形变为圆形 */
border-radius: 50%;
transition: all .3s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>