平面变换分类：位移 旋转 缩放
注意：transform属性具有层叠性 覆盖性
使用transform属性实现元素的位移、旋转、缩放等效果
1.位移： transform: translate(x,y);
1.水平垂直位移
1.transform: translate(水平移动距离, 垂直移动距离);
2.取值（正负均可）/像素单位数值 / 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右-负向左，Y轴正向为下负向上
3.translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX(水平方向) & translateY(垂直方向)
<!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>
.father {
width: 500px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
width: 150px;
height: 100px;
background-color: pink;
transition: all 1s;
}
/* 鼠标移入父盒子 子盒子的位置改变 */
.father:hover .son {
/* transform: translate(300px,200px); */
/* transform: translate(水平方向,垂直方向); */
/* 百分比：盒子自身尺寸的百分比 */
/* transform: translate(100%,80%); */
/* transform: translate(-100%,-100%); */
/* 只给一个值：水平方向X轴移动 */
transform: translate(100px);
/* 取值X控制X轴水平移动 取值Y控制Y轴垂直移动 注意：XY必须大写*/
transform: translateY(100%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.位移绝对定位居中
1.子绝父相的子盒子 ：取值top50% left50%
2.手动计算定位居中：盒子上外边距 左外边距 取值自身宽高的一半为负数（注意：如果盒子尺寸有变化盒子位置会改变）
3.绝对定位居中：transform: translate(-50%,-50%) :位移取值为百分比数值，参照盒子自身尺寸计算移动距离,就算盒子尺寸有变化 子盒子还是在父盒子里面居中
<!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>
.father {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
transform: translate(-50%,-50%);
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
2.旋转:transform: rotate(deg角度);
1.transform: rotate(deg角度); 角度单位是deg
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>Document</title>
<style>
.father {
width: 600px;
height: 600px;
border: 1px solid #000;
}
img {
width: 250px;
transition: all 100s;
}
.left {
float: left;
}
.right {
float: right;
}
/* deg 角度度数 */
.father:hover .left img{
/* 顺时针旋转 */
transform: rotate(36000deg);
}
.father:hover .right img {
/* 逆时针旋转 */
transform: rotate(-36000deg);
}
</style>
</head>
<body>
<div class="father">
<div class="left"><img src="./images/rotate.png" alt=""></div>
<div class="right"><img src="./images/rotate.png" alt=""></div>
</div>
</body>
</html>
3.转换原点：transform-origin
1.默认圆点是盒子中心点 transform-origin: 原点水平位置 原点垂直位置;
2.取值：方位名词（left、top、right、bottom、center）-
像素单位数值（px) 百分比（参照盒子自身尺寸计算）
<!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>
img {
width: 200px;
margin: 200px 400px;
border: 1px solid #000;
transition: all 10s;
transform-origin: left bottom;
/* transform-origin: left bottom; 旋转原点转换 */
/* transform-origin: 10px 30px; */
/* transform-origin: 10% 20%; */
}
img:hover {
transform: rotate(3600000deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
4.多重转换：transform复合属性
1.transform:translate() rotate();
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>Document</title>
<style>
.box {
width: 1200px;
height: 200px;
border: 1px solid #000;
}
img {
width: 200px;
transition: all 6s;
}
.box:hover img {
transform: translateX(1000px) rotate(360deg);
/* 边走边转*/
/* transform: rotate(360deg) translate(1000px); */
/* 旋转可以改变左边轴向 */
/* 层叠性：旋转覆盖了位移 */
/* transform: translate(1000px); */
/* transform: rotate(360deg); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre.png" alt="">
</div>
</body>
</html>
5.缩放：transform: scale(x, y);
1.transform: scale(x轴缩放倍数, y轴缩放倍数);
2.一般情况下只为scale设置一个值表示X轴Y轴等比例缩放transform: scale(2);
scale取值大于1表示放大 取值小于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>Document</title>
<style>
.box {
width: 300px;
height: 210px;
background-color: pink;
margin: 100px auto;
}
.box img {
width: 100%;
transition: all 1s;
}
.box:hover img {
/* width: 150%; */
/* 从中心点放大 大于1是放大 小于1是缩小 */
transform: scale(1.5);
transform: scale(0.8);
}
</style>
</head>
<body>
<div class="box">
<img src="./12-product.jpeg" alt="">
</div>
</body>
</html>
6.渐变：background-image: linear-gradient
1.background-image: linear-gradient(transparent,rgba(0,0,0,.5))
transparent 透明色
2.取值可以为多种颜色颜色分层渐变
3.取值多种颜色 并添加百分比 按照百分比来分层渐变 100%自身高度
3.渐变方向：（方位：to left ， to top ，to right ，to bottom）（角度：deg）
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 1000px;
height: 100px;
margin: 100px auto;
/*
渐变：
1.给背景图片添加的background-image 不是背景颜色 （渐变不是一种单一的颜色）
*/
/* 两种颜色 */
background-image: linear-gradient(red,orange);
/* 三种颜色 */
background-image: linear-gradient(red,orange,yellow);
/* 分层渐变效果 */
/* 盒子上下划分 高度 100% */
/* 0% - 30% red */
/* 30% - 50% orange */
/* 50% - 80% black */
/* 8% - 100% blue */
background-image: linear-gradient(
red 30%,
orange 50%,
black 80%,
blue 100%
);
/* 渐变的方向：*/
/* 1.方位：to left ， to top ，to right ，to bottom */
/* 2.角度：deg */
background-image: linear-gradient(to top, black ,red);
background-image: linear-gradient(45deg, #59c173, #a17fe0, #5d26c1);
background-image: linear-gradient(to right , #59c173 30%, #a17fe0 80%, #5d26c1 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
