transform-origin: x-axis y-axis z-axis;
以上代码是指定轴心的最基本方式,其中x-axis、y-axis、z-axis分别指定轴心在x、y、z三个方向上的位置,可以是像素、百分比或关键字(left、right、center、top、bottom等)。
transform-origin: center center;
如果只指定两个值,表示x和y方向的轴心都在元素的中心。
transform-origin: left top;
如果指定两个像素值,表示元素的左上角将成为轴心。
除了CSS属性方式,大家还可以使用transfrom函数,如下:
transform: rotate(45deg) translate(50px, 50px) translate(-50%, -50%);
以上代码表示先将元素绕默认轴心(元素中心)旋转45度,然后平移50个像素,随后再把元素回移动回原来的中心点。
当然也可以在transform函数中组合使用matrix函数,实现更加复杂的变换效果。