transform-origin屬性其實就是指定2D或3D變換/動畫的中心點。其賦值是基於變換元素的位置。元素的左上角位置爲(0,0)。
下面的例子是小DIV繞着中心進行圓環形旋轉。 中心點的位置是200,200。但是設置transform-origin時要計算出這個中心點相對
於小DIV(變換元素)所在的位置，即190,100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform-origin</title>
<style>
#div1
{
position: relative;
height: 400px;
width: 400px;
margin: 50px;
border: 1px solid black;
}
#div2
{
position: absolute;
top:100px;
left:10px;
width:60px;
height:60px;
border: 1px solid black;
background-color: red;
animation:myfirst 30s;
transform-origin:190px 100px;
}
#c{
width:5px;height:5px;
background-color:black;
position: absolute;
top:200px;
left:200px;
}
@keyframes myfirst{
100%{
transform:rotate(-360deg);
}
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="c"></div>
</div>
</body>
</html>
我這種腦子反映慢的人，就得記錄的這麼詳細，不然下次又不知道怎麼回事了。/(ㄒoㄒ)/~~