本文主要是介绍css3改变元素基点transform-origin，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天使用css3制作旋转动画，突然碰到了奇怪的现象，元素不是绕着自己的中心旋转。
后来调试发现使用了margin-top，转移了元素的位置，但是中心点没有移动。那么这样是不是多了一种改变元素基点的方法。
这种还是挺好用。
当然标准更多的是调整transform-origin
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变
这篇关于css3改变元素基点transform-origin的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
