tranform-origin 設置變形的中心點
2d轉換的時候主要是rotate(deg) 設置盒子旋轉時會考慮到基點，2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。
我們嘗試改變中心點看2D 旋轉的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:200px;
height:1000px;
background-color:gold;
float:left;
margin:30px;
transition:all 500ms ease;
}
div:nth-child(2){
transform-origin:left center;
}
div:nth-child(3){
transform-origin:left top;
}
div:nth-child(4){
transform-origin:50px 50px;
}
div:hover{
transform:rotate(90deg);
}
</style>
</head>
<body>
<div>默認中心點</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
第一張圖是默認的 已div中心點爲基點旋轉
第二張圖ransform-origin:left center;左中爲基點旋轉
第三張transform-origin:left top;左上爲基點旋轉
第四張transform-origin:50px 50px; 設置了旋轉具體的位置
| 值 | 描述 |
|---|---|
| x-axis |
定義視圖被置於 X 軸的何處。可能的值：
|
| y-axis |
定義視圖被置於 Y 軸的何處。可能的值：
|
| z-axis |
定義視圖被置於 Z 軸的何處。可能的值：
|