CSS中的transform-origin

前言

在没有设置过transform-origin属性时，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点/中心点）位置进行变形的。而CSS3 中的transform-origin属性用于设置旋转元素的基点位置，熟悉使用transform-origin并结合CSS3动画可以使元素沿着某一基点进行旋转，位移

基本语法

1.语法

transform-origin: x-axis y-axis z-axis;

2.默认值

transform-origin:50% 50% 0;

3.单位

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

示例

1.正常情况下默认值选择45deg

        .outer {
			      width: 100px;
			      height: 100px;
			      background-color: gray;
			    }
			    .inner {
			      transform: rotate(45deg);
			      width: 100%;
			      height: 100%;
			      background-color: indianred;
				}

 2.以顶部选择180deg

			 .outer {
			      width: 100px;
			      height: 100px;
			      background-color: gray;
			    }
			    .inner {
			      transform: rotate(180deg);
			      width: 100%;
			      height: 100%;
			      background-color: indianred;
				  transform-origin:50% 0;
				   /* animation:an-circle 3s ease-in-out infinite; */
				}

3.以右侧中心旋转180deg 

         .outer {
			      width: 100px;
			      height: 100px;
			      background-color: gray;
			    }
			    .inner {
			    transform: rotate(180deg);
					transform-origin:100% 50%;
			      width: 100%;
			      height: 100%;
			      background-color: indianred;
				   animation:an-circle 3s ease-in-out infinite;
				}
				@keyframes an-circle  {
				       to {
				          transform: rotate(1.5turn);
				       }
				    }

４.以右上角为中心开始旋转

         .outer {
			      width: 100px;
			      height: 100px;
			      background-color: gray;
			    }
			    .inner {
			    /* transform: rotate(0deg); */
			         transform-origin:100% 0;
			      width: 100%;
			      height: 100%;
			      background-color: indianred;
				   animation:an-circle 3s ease-in-out infinite;
				}
				@keyframes an-circle  {
				       to {
				          transform: rotate(1.5turn);
				       }
				    }

 从以上的几个例子当中可以清楚地知道了transform-origin: x-axis y-axis;属性值的所代表的偏移位置，了解各属性值所代表的偏移位置后可以很灵活得使元素按照某一基准点进行旋转。