transform-origin的作用：
transform-origin是更改一个元素变形原点，原点就是元素绕着旋转或变形的点，像transform属性的rotate、translate、scale、skew、matrix 再没有使用transform-origin之前，都是以元素的中心变形的。
注：transform-origin只有在使用了transform后才奏效；
transform-origin的使用：
1. 默认的转换原点是其元素的中心点【center】；
2. transform-origin属性可以使用一个、两个或三个值来指定，每一个值都表示一个偏移量x-offset、y-offset、z-offset
x-offset：
定义变形中心距离盒模型的左侧的偏移量;
y-offset：
定义变形中心距离盒模型的顶的偏移量；
z-offset：
定义变形中心距离用户视线的左侧的偏移量;
3.transform-origin的属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
以下关键字等同于百分值
left,center right 是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
top center bottom 是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
<!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> #wrap{ position: relative; width: 200px; height: 200px; margin: 100px auto; border: 1px solid #3333; position: relative; perspective:150; } .row{ position: absolute; top: 100px; display: block; width: 200px; height: 1px; background-color: pink; z-index: 999999; } .column{ position: absolute; top: 0; left: 100px; display: block; width: 1px; height: 200px; background-color: pink; z-index: 999999; } .inner{ width: 200px; height: 200px; background-color: aquamarine; transition: 1s transform; /* transform: scale(0.5); */ transform: rotate(45deg); /* transform-origin: 50px;相当于25px */ /* transform-origin:-50px;走了75px */ /* transform-origin: -50px -50px; x：75px y：75px */ /* transform-origin: 200px 200px; */ /* transform-origin: left; */ transform-origin: 50px 50px; z-index: 999; } .test{ position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; border: 1px solid rgba(219, 5, 5, 0.692); box-sizing: border-box; transform: translate(50px,50px); } .inner:hover{ transform:rotate(0) } </style> </head> <body> <div id="wrap"> <div class="inner"> <span class="row"></span> <span class="column"></span> </div> <div class="test"></div> </div> </body> </ht
transform：rotate(45deg);
transform-origin:50px 50px;
[第一个50px代表：x轴移动50px，第二个50px代表：y轴移动50px；此时inner的原点是了test左上角的位置，inner基于该原点旋转45deg]
<!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> #wrap{ position: relative; width: 200px; height: 200px; margin: 100px auto; border: 1px solid #3333; position: relative; perspective:150; } .row{ position: absolute; top: 100px; display: block; width: 200px; height: 1px; background-color: pink; z-index: 999999; } .column{ position: absolute; top: 0; left: 100px; display: block; width: 1px; height: 200px; background-color: pink; z-index: 999999; } .inner{ width: 200px; height: 200px; background-color: aquamarine; transition: 1s transform; transform: rotate(45deg); transform-origin:left; z-index: 999; } .test{ position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; border: 1px solid rgba(219, 5, 5, 0.692); box-sizing: border-box； transform: translate(50px,50px); } .inner:hover{ transform:rotate(0) } </style> </head> <body> <div id="wrap"> <div class="inner"> <span class="row"></span> <span class="column"></span> </div> <!-- <div class="test"></div> --> </div> </body> </html>
transform: rotate(45deg);
transform-origin:left;
[是以左边的中心点为原点然后再进行45deg旋转，其余的top、right和bottom类似；]
<!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>
#wrap{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #3333;
position: relative;
perspective:150;
}
.row{
position: absolute;
top: 100px;
display: block;
width: 200px;
height: 1px;
background-color: pink;
z-index: 999999;
}
.column{
position: absolute;
top: 0;
left: 100px;
display: block;
width: 1px;
height: 200px;
background-color: pink;
z-index: 999999;
}
.inner{
width: 200px;
height: 200px;
background-color: aquamarine;
transition: 1s transform;
transform: scale(0.5)；
transform-origin:50px;
z-index: 999;
}
.test{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 1px solid rgba(219, 5, 5, 0.692);
box-sizing: border-box;
transform: translate(50px,50px);
}
.inner:hover{
transform: scale(1);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<span class="row"></span>
<span class="column"></span>
</div>
<!-- <div class="test"></div> -->
</div>
</body>
</html>
图一：
transform: scale(0.5);
图二：
transform: scale(0.5);
transform-origin:50px;【由于以left的中心缩小了0.5，向x抽移动了25px，放大2，则向x抽移动50px，放大3，则向x轴移动100px，放大4，则150px，以此类推】；
无论怎样变形，都是在元素变形之前的坐标去以left、top、right和bottom去进行相应的transform值；