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值；