常见的transform属性值包括：
translate(x, y)：按指定的水平（x）和垂直（y）距离移动元素。
rotate(angle)：按指定的角度旋转元素，正值表示顺时针旋转，负值表示逆时针旋转。
scale(x, y)：按指定的比例缩放元素，x表示水平方向的缩放比例，y表示垂直方向的缩放比例，如果只指定一个值，则两个方向均按该值缩放。
skew(x-angle, y-angle)：按指定的角度倾斜元素，x-angle表示水平方向的倾斜角度，y-angle表示垂直方向的倾斜角度。
例如，要将一个元素向右下方平移100px，可以使用以下代码：
移动
translate(x, y)：
transform: translate(100px, 100px);移动的时候坐标轴的方向
数值是正数的时候，会按照坐标轴正方向移动
旋转
transform: rotate(deg):
transform: rotate(45deg);默认的旋转中心是盒子的中心，当度数是正数的时候，旋转是按照顺时针旋转的，负值的时候，是按照逆时针旋转的。
单位deg必须携带
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.head{
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background-color: pink;
transform: translate(10px,10px) rotate(45deg);
}
</style>
</head>
<body>
<div class="head">
123
</div>
</body>
</html>移动按照x，y轴的正方向移动10px的举例，使用ritate旋转45°
效果展示
更改旋转中心
transform-origin: x,y;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.head{
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background-color: pink;
transform-origin: 0 0;
transform: translate(10px,10px) rotate(45deg);
}
</style>
</head>
<body>
<div class="head">
123
</div>
</body>
</html>
旋转点的参数设置
缩放
transform: scale(1.5, 0.8);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.head{
text-align: center;
line-height: 300px;
width: 300px;
height: 300px;
background-color: pink;
transform-origin: 100% 100%;
transform: scale(50%,50%);
}
</style>
</head>
<body>
<div class="head">
123
</div>
</body>
</html>
其中的参数可以是数字也可以是百分比 举例:(.5)(50%)(1.2)
重点
需要注意的是，使用translate的时候，他的坐标是按照盒子的方向的，并不是按照浏览器的方向，
当盒子旋转的时候，此时坐标轴方向变化成这种
所以请注意，如果旋转和移动同时进行的时候，注意前后顺序，以免造成误解。
