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ㄒ)/~~